korinthorama logo

ODYSSEY CMS

jQuery Plugins | Animated Masked Thumbnails

Τι είναι

Το jOthumb είναι ένα jQuery plugin που αναλαμβάνει να δημιουργεί thumbnails σταθερών διαστάσεων.
Αφού ορίσουμε την διάσταση που θέλουμε, μας εμφανίζει μια λίγο μεγαλύτερη εικόνα, μασκαρισμένη και κεντραρισμένη σ' αυτή την διάσταση.
Το μη ορατό τμήμα της εικόνας, αποκαλύπτεται με ένα transition τοποθετώντας το mouse πάνω στο thumbnail.

Demo



Οδηγίες χρήσης

Αφού το συμπεριλάβουμε στη σελίδα μας με

<script type='text/javascript' src='jOthumb.js'></script>

το ενεργοποιούμε με

$(document).ready(function() {
$('div[data-descr="jOthumb"]').each(function(){
$(this).jOthumb();
});
});


Για κάθε thumbnail ο κώδικάς μας πρέπει να έχει την ακόλουθη μορφή:

<div data-descr="jOthumb" style="width: 150px; height: 150px; visibility:hidden;">
<img data-descr="contents" src="thumbnail.jpg" width="350" height="220">
</div>

Το data-descr="jOthumb" είναι η μασκαρισμένη περιοχή (πχ 150Χ150) και το data-descr="contents" είναι η εικόνα του thumbnail που μασκάρουμε. Θα εμφανιστεί κεντραρισμένη πίσω από και σε σχέση με την μάσκα και φυσικά μπορούμε να έχουμε την εικόνα σαν link κλπ
Λίγη css που χρειάζεται είναι ενσωματωμένη στο plugin, ενώ θα πρέπει να μετατρέψετε αν θέλετε σε class το inline css του div.

Παράμετροι

To plugin δέχεται τις ακόλουθες παραμέτρους:

  • x (αρχική τιμή 0)
    Η συντεταγμένη x της αρχικής θέσης εμφάνισης της εικόνας
  • y (αρχική τιμή 0)
    Η συντεταγμένη y της αρχικής θέσης εμφάνισης της εικόνας
  • speed (αρχική τιμή 150)
    Η ταχύτητα σε miliseconds με την οποία αποκαλύπτεται η εικόνα
  • outSpeed (αρχική τιμή 600)
    Η ταχύτητα σε miliseconds με την οποία επανέρχεται η εικόνα στην αρχική της κατάσταση

Παράδειγμα σύνταξης παραμέτρων

$(document).ready(function() {
$('div[data-descr="jOthumb"]').each(function(){
$(this).jOthumb({"speed": 250, "outSpeed": 750});
});
});

Αν θέλουμε να περάσουμε διαφορετικές παραμέτρους στο κάθε thumbnail (πχ διαφορετικά x, y) τότε ή ενδεικνυόμενη μέθοδος είναι να ορίσουμε τις παραμέτρους στην html ως attributes:

<div data-descr="jOthumb" style="width: 150px; height: 150px; visibility:hidden;" data-x="150" data-y="80" data-speed="250" data-outSpeed="300">
<img data-descr="contents" src="thumbnail.jpg" width="350" height="220">
</div>

και να διαβάσουμε τα attributes ως παραμέτρους κατά την δημιουργία κάθε thumbnail:

$('div[data-descr="jOthumb"]').each(function(){
var x = $(this).attr("data-x");
var y = $(this).attr("data-y");
var speed = $(this).attr("data-speed");
var outSpeed = $(this).attr("data-outSpeed");
$(this).jOthumb({"x": x, "y": y, "speed": speed, "outSpeed": outSpeed});
});