Image Zoom [JQZoom] ~ BlogyTricks

Γεια σας σημερα θα σας δειξουμε ενα πολλη ωραιο tip που ειναι σε θεμα εικονας και συγκεκριμενα ειναι για να μπορουνε οι επισκεπτες τους blog σας να κανουν zoom στις εικονες που εχετε ανεβασει στο blog σας. (Δειτε οπως παντα στο τελος της αναρτησης και το VideoTutorial/Demo για να καταλαβετε πως ακριβως ειναι).

1) Πρώτα, συνδεθείτε στο λογαριασμό σας Blogger.

2) Κάντε κλικ στο Σχεδίαση. και επιλέξτε Επεξεργασία HTML.

Προσοχή:

3) Πριν ξεκινήσουμε:

- Πρέπει να είστε προσεκτικοί κατά την αλλαγή του προτύπου σας.

- Πριν κάνετε οποιαδήποτε αλλαγή, αποθηκεύστε το προτυπο σας σε ασφαλή μέρος (Στον υπολογιστη σας).

4) Παμε τωρα να ψαξουμε τον παρακατω κωδικα(Ctl+F):

</head>

5) Και επικολουμε ακριβως απο πανω τον παρακατω κωδικα:

<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jquery.jqzoom1.0.1.js" type='text/javascript'></script>
<link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/jqzoom.css" type="text/css" />
<script type="text/javascript">

$(function() {
var options =
{

zoomWidth: 275,

zoomHeight: 275

}
$(".jqzoom").jqzoom(options);

var options2 =
{

zoomWidth: 275,

zoomHeight: 275,

zoomType:'reverse'
}

$(".jqzoom2").jqzoom(options2);

});
</script>


-Αποθηκευση Προτυπου

ΜικροΣημιωση:

- Τα κοκκινα γραμματα υποδεικνιουν το μεγεθος του "παραθυπου" του zoom οπου κανει.

6) Τωρα θα δουμε πως αυτο το zoom θα το εφαρμοζετε στις εικονες που θελετε.

- Αμα υποθεσουμε οτι ο παρακατω κωδικα ειναι ο συνηθισμενος μια απλης εικονας:

<a href="(Το url της εικονας)" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="(Το url της εικονας)" /></a>

-Τοτε για να εφαρμοστει το zoom θα πρεπει να προσθεσετε το παρακατω κωδικα οπου ειναι στα μωβ γραμματα και θα φαινεται ο κωδικας καπως ετσι:

<a href="(Το url της εικονας)" class="jqzoom" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img src="(Το url της εικονας)" /></a>