Προγραμματισμός

Χρησιμοποιώντας το carouFredSel jQuery plugin, και ένα παράδειγμα.

Αντιγράφω από το επίσημο site του carouFredSel: «Το carouFredSel είναι απλώς η ισχυρότερη και πιο ευέλικτη μέθοδος για να προσθέσετε carousels στο site σας». Το χρησιμοποιώ ένα χρόνο τώρα και δεν έχω λόγο να αμφιβάλλω!

Το εν λόγω jQuery plugin είναι σχετικά «βαρύ» αλλά με έχει βοηθήσει να χτίσω δεκάδες διαφορετικά carousels και slideshows. Βέβαια, το carousel σαν UI στοιχείο θεωρείται κακή πρακτική πλέον αλλά δοκίμασε να πείσεις τον πελάτη σου! Αυτή η απόφαση (συνήθως) δεν είναι δική μου έτσι κι αλλιώς, και με αυτό το άρθρο θα σας δείξω κάποιες ιδιαιτερότητες και μία υλοποίηση.

Έστω ότι έχω ένα οριζόντιο carousel με φωτογραφίες, το οποίο πρέπει να γεμίζει όλο το πλάτος της οθόνης, με ένα από τα slides στο επίκεντρο (αλλά όχι στο κέντρο της οθόνης) και τα υπόλοιπα «θαμπά». Κάτι σαν αυτό ας πούμε. Η τυπική δομή HTML αυτού του στοιχείου είναι η εξής:

<div class="carousel-wrapper">
	<div class="pagination"></div>
	<div class="mask left"></div>
	<div class="mask right"></div>

	<ul class="slides">
		<li class="slide">
			<img src="http://placehold.it/600/b3aa00/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/8bba00/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/a186be/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/cc6600/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/aba000/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/d64646/ffffff" class="photo" alt="">
		</li>
		<li class="slide">
			<img src="http://placehold.it/600/8e468e/ffffff" class="photo" alt="">
		</li>
	</ul>
</div>

Σημείωση: τα δύο <div class="mask"> χρειάζονται μόνο για τη συγκεκριμένη υλοποίηση.

Ασφαλώς απαιτούνται και κάποια CSS και ορίστε ένα τυπικό σετ, μαζί με τα στυλ για τις «μάσκες»:

.carousel-wrapper {
	width: 100%;
	height: 600px;
	overflow: hidden;
	position: relative;
}
.carousel-wrapper .slides {
	width: 600px;
	height: 600px;
	margin: 0;
	padding: 0;
	overflow: hidden;
}
.carousel-wrapper .slide {
	float: left;
	list-style: none;
	margin: 0;
	padding: 0;
	width: 600px;
	height: 600px;
	overflow: hidden;
}

.carousel-wrapper .mask {
	background: rgba(255, 255, 255, .5);
	display: block;
	z-index: 2;
	position: absolute;
	top: 0;
	bottom: 0;
}
.carousel-wrapper .mask.left {
	margin-right: 480px;
	right: 50%;
	left: 0;
}
.carousel-wrapper .mask.right {
	margin-left: 120px;
	left: 50%;
	right: 0;
}

.pagination {
	margin-right: -120px;
	width: 600px;
	z-index: 1;
	position: absolute;
	right: 50%;
	bottom: 12px;
	text-align: center;
}
.pagination a {
	border: 1px solid #066;
	border-radius: 50%;
	display: inline-block;
	margin: 0 4px;
	outline: none;
	vertical-align: top;
	width: 14px;
	height: 14px;
}
.pagination span {
	display: none;
}
.pagination .selected {
	background: #066;
}

H ιδιαιτερότητα του συγκεκριμένου carousel είναι στο ότι θα πρέπει, η φωτογραφία που είναι στο επίκεντρο να βρίσκεται στην αριστερή άκρη της κολώνας πλάτους 960 pixels του site. Δεν είναι responsive και θα είναι λιγάκι δύσκολο να γίνει — αφήστε δε που ίσως να μην πρέπει! Αλλά αυτή είναι άλλη συζήτηση…
Οι μάσκες σκεπάζουν (με position:absolute; z-index:2) τα slides από τις άκρες του κεντρικού μέχρι τις άκρες του παράθυρου. Η αριστερή μάσκα έχει left:0 (το αριστερό άκρο του παράθυρου), right:50%, για να απέχει η δεξιά άκρη της μάσκας από την δεξιά άκρη του παράθυρου όσο το μισό συνολικό πλάτος και margin-right:480px που είναι το μισό πλάτος της κολώνας. Η δεξιά μάσκα αντίστοιχα έχει right:0, left:50% και margin-left:120px, που είναι η απόσταση που το κεντρικό slide περισσεύει από το μισό πλάτος της κολώνας — 980 pixels / 2 - 600 pixels (το πλάτος του slide).

Το carouFredSel θα φροντίσει να γεμίσει όλο το διαθέσιμο πλάτος με slides, με τις παρακάτω ρυθμίσεις:

$( '.carousel-wrapper' ).find( '.slides' ).carouFredSel( {
	auto: 5000,
	width: '100%',
	height: 600,
	items: {
		visible: 4,
		width: 600,
		height: 600
	},
	scroll: {
		items: 1,
		easing: 'easeInOutQuint',
		duration: 400,
		pauseOnHover: true
	},
	pagination: '.carousel-wrapper .pagination',
	onCreate: function(){
		$(this).css( 'margin-left', '120px' );
	}
}, { transition: true } );

Θα πρέπει να ρίξετε τουλάχιστον μια γρήγορη ματιά στο επίσημο documentation του plugin γιατί εγώ θα αναφερθώ μόνο στις ρυθμίσεις που έχω χρησιμοποιήσει παραπάνω, οι οποίες είναι: auto:5000 για να «τρέχει» το slideshow αυτόματα (κακή ιδέα!), width:'100%' για να απλωθεί το carousel σε όλο το πλάτος του παράθυρου, height:600 που είναι το ύψος των φωτογραφιών (σε pixels), items:{visible:4} για γεμίζει η οθόνη με slides, μέχρι 4 x 600 = 2400 pixels πλάτος παράθυρου, items:{width:600} για το πλάτος του κάθε slide, items:{height:600} για το ύψος του κάθε slide, scroll:{items:1} που είναι το πόσα slides θα μετακινούνται κάθε φορά, scroll:{easing:'easeInOutQuint'} που αφορά στο είδος της κίνησης[1], scroll:{duration:400} για την διάρκεια του animation και scroll:{pauseOnHover:true} για να σταματάει το animation όταν το ποντίκι βρίσκεται πάνω από το slide.

Επίσης, το pagination:'.carousel-wrapper .pagination' ορίζει πως το carouFredSel θα χρησιμοποιήσει το div.pagination που βρίσκεται μέσα το div.carousel-wrapper για να «χτίσει» το pagination με τα κυκλάκια (ή όπως αλλιώς το θέλετε, CSS είναι) και το onCreate:function(){ $(this).css( 'margin-left', '120px' ); } φροντίζει να μετακινήσει το ul.slides 120 pixels προς τα δεξιά, όσο είναι και η απόσταση που το κεντρικό slide περισσεύει από το μισό πλάτος της κολώνας (δείτε τα CSS λίγο παραπάνω) αφού πρώτα χτιστεί το carousel και πριν αρχίσει το πρώτο animation.

Τέλος, έξω από το initialization object του carouFredSel υπάρχει μία ακόμα ρύθμιση, το transition:true που καθοδηγεί το plugin να χρησιμοποιήσει CSS animations, με τη βοήθεια του Transit, που είναι ένα jQuery plugin για να CSS transitions[2].

Σημειώσεις:

  • Το παραπάνω carousel βασίζεται επίσης σε 2 εξ ορισμού ρυθμίσεις του carouFredSel, την circular:true και την infinite:true.

  • [1] Το carouFredSel περιλαμβάνει μόνο 5 είδη animation, τα “linear”, “swing”, “quadratic”, “cubic” και “elastic“. Αν θέλετε κάποιο άλλο όπως το “easeInOutQuint” θα πρέπει είτε να φορτώσετε το jQuery Easing Plugin είτε να χρησιμοποιήσετε το Transit και τη ρύθμιση transition:true όπως στο παράδειγμα.

  • [2] Αν μπήκατε στον κόπο να δείτε το documentation του Transit, θα είδατε πιθανότατα τη μέθοδο για να χρησιμοποιούνται jQuery animations όταν ο browser δεν υποστηρίζει CSS Transitions:

    if (!$.support.transition)
      $.fn.transition = $.fn.animate;

    Εγώ βέβαια χρησιμοποιώ το Modernizr σε κάθε μου έργο (και το ίδιο θα έπρεπε να κάνετε κι εσείς!) οπότε, για να έχω τελικά animated carousels σε όλους τους browsers που «υποστηρίζω», μπορώ να γράψω τον παραπάνω έλεγχο ως εξής:

    if ( !Modernizr.testProp( 'transition' ) )
        $.fn.transition = $.fn.animate;

Αφήστε μια απάντηση

Η ηλ. διεύθυνσή σας δεν δημοσιεύεται. Τα υποχρεωτικά πεδία σημειώνονται με *