Gallery Εικόνων - Image Effect με jQuery Hover / Zoom για Blogger

Ακόμα δεν έχει περάσει μια μέρα από το πρώτο slider-gallery εικόνων που είπαμε, και να και το δεύτερο. Έτσι για να έχετε επιλογές!
Βέβαια έχουν πολλές διαφορές, αν και τα δύο βασίζονται στη βιβλιοθήκη JQuery.
Δες ένα Demo (αν και η εικόνα είναι αρκετά επεξηγηματική) στο http://j-quary.blogspot.com/

ΕΓΚΑΤΑΣΤΑΣΗ ΤΟΥ GALLERY ΣΕ BLOGGER

1. Σύνδεση στον blogger λογαριασμό
2. Σχεδίαση> Επεξεργασία html
3. Πατώντας ctrl+F στο πληκτρολόγιό μας ψάχνουμε να βρούμε το ]]></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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKAblZ5sUToFQ55ARkZZhkfeU0TTmzV_HK_MnhVftQ2KTcwWtJPRp4TueF1k0GUWn1r-rquGdxWYEYDD6j5GQ0cE6kPpYErGvFdVdhukGbQ9EvoTl4jQp5Tv5X-ZgzXOqKJuEnLXS_llFQ/) no-repeat center center; /* Image used as background on hover effect
border: none; /* Get rid of border on hover */
}

4. Τώρα βρίσκουμε το </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>

5. Αποθήκευση προτύπου!

6. Τώρα πάμε σε Σχεδίαση> Στοιχεία Σελίδας> Προσθήκη 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, τη διεύθυνση της φωτογραφίας σας
# : εδώ βάζετε το link-σύνδεσμο όπου θέλετε να οδηγείται κάποιος, όταν πατάει την φωτογραφία σας. αν δεν θέλετε να βάλετε κάποιο link αφήστε το #

Για προσθαφαίρεση φωτογραφιών, προσθαφαιρούμε την παρακάτω γραμμή:

<li><a href="URL 1 #"><img src="picture 1 Link" alt="" /></a></li>

Μην ξεχάσετε να αποθηκεύσετε το widget σας.

Enjoy λοιπόν! Και αφήστε κανένα σχόλιο να βλέπω πως πάτε!!

Κατά τη συγγραφή της παραπάνω ανάρτησης, άκουγα το παρακάτω τραγούδι:

Πηγές: http://www.allblogtools.com/tricks-and-hacks/how-to-add-images-gallery-widget-with-jquery-hover-zoom-to-your-blogger/

Copyrights: http://www.bloggertips.gr/