jQuery Thumbnail Hover/Zoom Effect για εικόνες

Σήμερα θα πάμε να επισκευτούμε την Κυρία Σοφία Καράγιαλη από την όμορφη Θεσσαλονίκη που εντελώς τυχαία την συναντήσαμε και να δούμε τι μας παρουσιάζει.

Παράλληλα δε, να την συγχαρώ δημόσια & να την ευχαριστήσω για την άδεια που μας έδωσε να σας παρουσιάσουμε την ανάρτηση της από την σελίδα μας.

Αξίξει να την επισκευτείτε δε θα χάσετε....έχει αρκετά & καλά θεματάκια στο blog της που αύριο θα τα παρουσιάζουν "οι δήθεν επαγγελματίες" ως ανακάλυψη δική τους.

Το blog της είναι αυτό!!!

Ακολουθεί η παρουσίαση της ανάρτησής της.....με μικρές πινελιές διακόσμησης από μας.




Πρόσφατα σέρφαρα στο internet και έτυχα πάνω σε αυτό το Effect και μου άρεσε πάρα πολύ . Σκέφτηκα να το μοιραστώ μαζί σας , ίσως και να το βρείτε χρήσιμο. Μπορείτε να το προσθέσετε όπου εσείς θέλετε στο header, sidebar,πάνω από το την κυρίως στήλη στο footer columns η όπου αλλού σας βολέψει. Λοιπόν ώρα για δουλεία…… Για να το βάλουμε στο blog μας κάνουμε τα εξής :

ΒΗΜΑ 1ο : Βαζουμε τα Gallery Codes στο Template μας .

Σύνδεση στο λογαριασμό blogger σας –> Διάταξη – > Επεξεργασία HTML και ψάχνουμε το κωδικό

]]></b:skin>

Πριν από αυτό κολλάμε το παρακάτω κωδικό :

ul.thumb { float: left; list-style: none; margin: 0; padding: 10px; width: 360px; } ul.thumb li { margin: 0; padding: 5px; float: left; position: relative; /* Set the absolute positioning base coordinate */ width: 110px; height: 110px; } ul.thumb li img { width: 100px; height: 100px; /* Set the small thumbnail size */ -ms-interpolation-mode: bicubic; /* IE Fix for Bicubic Scaling */ border: 1px solid #ddd; padding: 5px; background: #f0f0f0; position: absolute; left: 0; top: 0; } ul.thumb li img.hover { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLZteYhPGQsdwMY-o6XX_oOTsYmC1TIL9GqEVeyrUvIOiyGSa_bCu-8nAq5wJb9CC2_tm_TsmwalVNu8kS94RuY0u59mRQ3xaNRrKWp1khzDdtRPxdIqW__8_12aDrfOYXHJ5APe8jLdU-/) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */

3. Έπειτα βρίσκουμε το

</head>

και πρίν απο αυτό (απο πάνω του) βάζουμε τον ακόλουθο κώδικα:

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/> <script type='text/javascript'> $(document).ready(function(){ //Larger thumbnail preview $(&quot;ul.thumb li&quot;).hover(function() { $(this).css({&#39;z-index&#39; : &#39;10&#39;}); $(this).find(&#39;img&#39;).addClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;-110px&#39;, marginLeft: &#39;-110px&#39;, top: &#39;50%&#39;, left: &#39;50%&#39;, width: &#39;174px&#39;, height: &#39;174px&#39;, padding: &#39;20px&#39; }, 200); } , function() { $(this).css({&#39;z-index&#39; : &#39;0&#39;}); $(this).find(&#39;img&#39;).removeClass(&quot;hover&quot;).stop() .animate({ marginTop: &#39;0&#39;, marginLeft: &#39;0&#39;, top: &#39;0&#39;, left: &#39;0&#39;, width: &#39;100px&#39;, height: &#39;100px&#39;, padding: &#39;5px&#39; }, 400); }); //Swap Image on Click $(&quot;ul.thumb li a&quot;).click(function() { var mainImage = $(this).attr(&quot;href&quot;); //Find Image Name $(&quot;#main_view img&quot;).attr({ src: mainImage }); return false; }); }); </script>

Τώρα εφόσον βάλαμε τους κωδικούς, κάνουμε Αποθήκευση Προτύπου και πάμε στο επόμενο βήμα .

ΒΗΜΑ 2ο : Δίνουμε βάση ,κτίζουμε το XHTML

Βάζετε τους κωδικούς παρακάτω όπου θέλετε εσείς .
Αν θέλετε να το βάλετε σαν widget τότε πάμε Διάταξη –> Στοιχεία Σελίδας –> Προσθήκη gadget –> και επιλεγούμε HTML/Javascript .
Αν θέλετε να το βάλετε στην ανάρτηση σας απλά αντιγράφετε και κολλάτε εκεί τους κωδικούς

<ul class="thumb"> <li><a href="#"><img src="picture 1 Link" alt="" /></a></li> <li><a href="#"><img src="picture 2 Link" alt="" /></a></li> <li><a href="#"><img src="picture 3 Link" alt="" /></a></li> <li><a href="#"><img src="picture 4 Link" alt="" /></a></li> </ul>

Κατόπιν αντί για το “ picture 1 Link “ εισάγετε το Url της εικόνας σας και εάν θέλετε να κάνετε τη σύνδεση εικόνας με μια άλλη σελίδα ή url αντί για “ # “ προσθέστε το url της σελίδας , όπου θέλετε να οδηγήσει η εικόνα .
Κάθε φορά που θέλετε να βάλετε και άλλη εικόνα στο γκαλερί σας , απλά επαναλαμβάνετε το κωδικό παρακάτω

<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>

Δείτε το DEMO εδώ!!!

Καλή Επιτυχία σε όσους το προσπαθήσουν να το περάσουν στη σελίδα τους!!!

Και μήν ξεχάσετε να περάσετε κι από εδώ!!!

Αξίζει να δείτε:
imgBox – Για να παρουσιάσετε τις εικόνες σας με στυλ !!!
jQuery Image Magnify Effect
Πως να βάλετε το Slimbox 2.02 για jquery-1.3.2 στο Bloggspot.
Πως να δημιουργήσετε Tab Navigation χρησιμοποιώντας το jQuery
Προσθέστε " scroll to top " κουμπί χρησιμοποιώντας Jquery
Blogger hacks.