1 JQUERY THUMBNAIL HOVER/ZOOM EFFECT-ΕΙΚΟΝΕΣ

Ένα πολύ όμορφο effect εικόνων για το Blog σας.Περνώντας  το ποντίκι  πάνω απο τις εικόνες σας μεγενθύνονται και ζουμάρονται .Μπορείτε να το τοποθετήσετε στην πλευρική στήλη σας ώς gallery εικόνων ή και στην εικόνα σας σε κάθε σας ανάρτηση.


ΔΙΑΔΙΚΑΣΙΑ:
ΒΗΜΑ 1
Πίνακας Ελέγχου►Σχεδίαση►Επεξεργασία 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;
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px;
-ms-interpolation-mode: bicubic;
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/AVvXsEjgWdAqYV1koLY2a4Q-GxOC93iCoyvGeKk5vl0ONk8telKIKJ_4QiS_3AowK47cCKSCtrTudLO4KZD1ZadwZjQ85UIHqxoAbk-JGUdc9YnzEQZRbwFZX-pjkgOH0b9RTjTXirNfXX8PQmFH/) no-repeat center center; /* Image used as background on hover effect
border: none;
}

Στην συνέχεια βρίσκουμε το επόμενο

</head>

Και πρίν απο αυτό επικολλούμε τον ακόλουθο

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"> </script>
<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

• Άν θέλετε να τοποθετήσετε το effect στην πλαϊνή στήλη του blog σας,σαν gallery εικόνων τότε η διαδικασία είναι η εξής.

Σχεδίαση ►Στοιχεία Σελίδας►Προσθήκη  gadget►Επιλογή HTML/Javascript
Αντιγραφή=Επικόλληση τον παρακάτω κωδικό

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

<li><a href="#"><img src="img2.jpg" alt="" /></a></li>
<li><a href="#"><img src="img3.jpg" alt="" /></a></li>
<li><a href="#"><img src="img4.jpg" alt="" /></a></li>
<li><a href="#"><img src="img5.jpg" alt="" /></a></li>
<li><a href="#"><img src="img6.jpg" alt="" /></a></li>
<li><a href="#"><img src="img7.jpg" alt="" /></a></li>
<li><a href="#"><img src="img8.jpg" alt="" /></a></li>

</ul>

Αντικαθιστούμε το img2,3,4...με το url της δικής μας εικόνας.Επίσης αν θέλουμε η εικόνα να έχει σύνδεση σε μια άλλη σελίδα τότε αντικαθιστούμε το # με το url της σελίδας αυτής.

• Άν θέλετε να το τοποθετήσετε το effect στην εικόνα που τοποθετείτε σε κάθε σας ανάρτηση τότε στην "επεξεργασία html"της ανάρτησης σας θα βάζετε τον κωδικό αυτό.

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

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

Εξίσου και εδώ αντικαθιστούμε το img2 και αν θέλουμε και το #

ΑΝ ΣΑΣ ΑΡΕΣΕ ΤΟ ΑΡΘΡΟ ΒΑΘΜΟΛΟΓΗΣΤΕ Ή ΑΦΗΣΤΕ ΤΟ ΣΧΟΛΙΟ ΣΑΣ!!!