10 Δεκεμβρίου 2009



11 Images Gallery Widget με jQuery Hover / Zoom στο Blog

Αρκετές φορές με ρώτησαν κάποιες φίλες, πώς γίνεται να κάνουμε ένα Images Gallery στο Blog μας, για να δείξουμε κάποιες φωτογραφίες μας. Βλέπεις, συνήθως με φωτογραφίες ασχολούνται οι γυναίκες περισσότερο :p Βρήκα ψάχνοντας λοιπόν έναν τρόπο, που λειτουργεί με jQuery, και που όταν περάσετε το ποντίκι σας πάνω απο μια εικόνα, αυτόματα την μεγαλώνει (zoom) όπως δείχνω στην εικόνα απο κάτω.
Μπορείτε να το τοποθετήσετε όπου εσείς θέλετε (αρκεί να χωράει), παράδειγμα μέσα στην ανάρτηση, στην πλαϊνή μπάρα κ.λ.π. (Μπορείτε επίσης να το δείτε στην πράξη, κάτω χαμηλά στο δικό μου blog, με τίτλο Blog Members). Ελάτε να σας δείξω πόσο εύκολο είναι, να το κάνετε κι εσείς, όσοι ενδιαφέρεστε. 1. Βήμα πρώτο: Τοποθετούμε τους CSS κώδικες Πηγαίνετε στην "Διάταξη->>Edit html->> και κάντε "Πλήρη λήψη προτύπου" Κατόπιν βρείτε αυτόν τον κώδικα ]]></b:skin> και πρίν απο αυτόν (απο πάνω του) επικολήστε τον παρακάτω κώδικα:
/* Blogger Zoom Gallery By AllBlogTools.com */ 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(http://4.bp.blogspot.com/_p4Te9Li52fs/So9a2fSh2jI/AAAAAAAAAAc/VX0mAW1oYHc/thumb_bg.png) no-repeat center center; /* Image used as background on hover effect border: none; /* Get rid of border on hover */ }
2. Βήμα 2ο, Τοποθετούμε το JavaScript Βρίσκουμε λοιπόν το: </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>
Εδώ τελειώσαμε με την επεξεργασία του προτύπου. Πατάμε λοιπόν "Αποθήκευση", και πάμε στο τρίτο βήμα. 3. Πατάμε στην "Διάταξη" "προσθήκη 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>
Εάν θέλουμε να προσθέσουμε κι άλλες εικόνες, τότε προσθέτουμε ξανά, επαναλαμβάνοντας το παρακάτω link: <li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li> Βάζουμε τα link των εικόνων μας, αντικαθιστώντας τα: "picture 1 Link" με των εικόνων μας. Εάν μάλιστα θέλουμε ώστε κάθε εικόνα να είναι και link που οδηγεί κάπου, τότε αντικαθιστούμε και το "#" με την διεύθυνση που θέλουμε να οδηγεί η εικόνα. Αν πάλι δεν θέλουμε, τα αφήνουμε όπως είναι. Αυτό ήταν όλο..
"Γειά σου, Εάν βρέθηκες για πρώτη φορά στο Blog μου, και εάν σε ενδιαφέρουν οι αναρτήσεις μου, μπορείς να εγγραφείς στο RSS feed του Blog. Μπορείς επίσης να κάνοντας εγγραφή στο Newsletter του blog μου, να λαβαίνεις απ ευθείας κάθε μου ανάρτηση στο email σου. Είσαι Twitter user; τότε μπορείς επίσης να με κάνεις Follow στο Twitter. Σε ευχαριστώ που με διαβάζεις,"




Print this post



Related Posts :



11 σχόλια:

VAD είπε... Best Blogger Tips

Eκεινος ο αγριεμενος ο αξυριστος με το μουστάκι εσύ εισαι;Τρόμαξα:)))


Το Θολό Τοπίο...με ξεκάθαρη ματιά. είπε... Best Blogger Tips

Το αστροπελέκι δηλώνει παρούσα...
Κι η ερώτηση μία...Ν`αγγίξω να μην αγγίξω το θολό τοπίο; Με βάζεις σε πειρασμό.:)


Το Θολό Τοπίο...με ξεκάθαρη ματιά. είπε... Best Blogger Tips

Δεν φταίω εγώ...Α πα πα...Οι αναρτήσεις σου φταίνε.
Αν μπεις και δεις συντρίμμια η ανάρτησή σου φταίει.
ΠΕΙΡΑΣΜΟΣ.!!!


zoyzoy είπε... Best Blogger Tips

Πειρασμός είσαι??Να το επιχειρήσω ή θα το βουλιάξω τ'αρμενάκι??
Καλό ΣΒΚ να'χεις!!


AATON είπε... Best Blogger Tips

Μην κάνει κανείς σας καμιά πατάτα μονάχα. Αποθηκεύετε πάντοτε σαν πρώτη κίνηση το πρότυπό του, και μετά κάνετε τις δοκιμές σας, και ΜΟΝΟ αν το χρειάζεστε.
Καλή επιτυχία!


Eva Neocleous είπε... Best Blogger Tips

Άλλη μια πολύ ενδιαφέρουσα ανάρτηση Νικόλα.
Σ΄ευχαριστούμε.
Καλό Σαββατοκύριακο!


Κατερίνα Ζηκούλη είπε... Best Blogger Tips

Το δοκίμασα και είναι υπέροχο.
Σαν να ζωντανεύουν οι εικόνες. Μόνο που στην φόρμα για νέα ανάρτηση μου βγαίνουν τεράστιες και μετά τις μετακινώ να γίνουν πιο μικρές. Μήπως κάνω κάτι λάθος;
Την καλησπέρα μου


pan de lees είπε... Best Blogger Tips

νικολα, γεια χαρά...ειμαι νεος στη παρεα, αλλα με εχεις βοηθησει ηδη πολυ...!!ερωτηση:αν θελω οι φωτογρ. να μεγαλωνουν περισσοτερο, τι πειράζω και που???...! πολυ καλες και χρησιμες οι οδηγιες σου.σ'ευχαριστω ηδη!!!! pan de lees:
http://www.aigioparalia.blogspot.com/
http://www.egioparalia.blogspot.com/
http://www.barmonodromos.blogspot.com/


pan de lees είπε... Best Blogger Tips

αστο, το βρηκα μονος μου...ευχαριστω παντος για την αναρτηση...την παλευα καιρο, και επιτελους την καταφερα (ο γερομπισμπικης) !!!φιλακια σε ολους.

pan de lees.


fashion handbags είπε... Best Blogger Tips

Thanks for the blog loaded with so many information. Stopping by your blog helped me to get what I was looking for.
Tibetan Jewelry
Handmade Jewelry


fashion handbags είπε... Best Blogger Tips

Just want to say what a great blog you got here!
designer handbags
replica handbags
louis vuitton handbags
replica Louis vuitton handbags
replica designer handbags


Δημοσίευση σχολίου

Πες πως δεν έχεις χρόνο να σχολιάσεις.. να 'χεις πάρει όμως σοβαρό ύφος, καλά;

Σημείωση: Μόνο ένα μέλος αυτού του ιστολογίου μπορεί να αναρτήσει σχόλιο.

Next Next Next