5 Πως να κανετε zoom σε εικονα

Πως να κανετε zoom σε εικονα..(για τους λατρεις του ειδους σαν εμενα..)

Παραδειγματα μπορειτε να δειτε  εδω..  και   εδω..


Ισως πολλες φορες θα θελατε να δειξετε μια μεγαλη εικονα,αλλα πρωτον θα πιασει πολυ χωρο στην σελιδα σας..και πολλες φορες μερικες εικονες ειναι μεγαλυτερες απο τις σελιδες μας..

Εδω λοιπον θα σας δειξω πως ο επισκεπτης σας μετακινωντας μονο τον δεικτη του ποντικιου επανω σε μια μικρη εικονα θα μπορει να βλεπει σε υπερμεγενθυση καθε λεπτομερεια..

Πριν ξεκινησετε διαλεξτε μια μεγαλη εικονα..

Με ενα οποιοδηποτε προγραμμα επεξεργασιας εικονας (photoshop ..paintshop..η και με το Microsoft Picture Mananger καντε την resize και αποθηκευστε την ξεχωριστα..

Δηλαδη .Αποθηκευση ως η στα αγγλικα save as..και δωστε ενα αλλο ονομα.

Ανεβαστε και την πρωτοτυπη εικονα..αλλα και την μικρη σε καποιο site φιλοξενιας εικονων..(tinypic,imageshack ),οχι ομως στο blog σας,και αντιγραψτε καπου τα Direct Link των εικονων σας..

1)πηγαινετε στον πανοπτη σας..ΔΙΑΤΑΞΗ>>ΕΠΕΞΕΡΓΑΣΙΑ HTML

kαι βρειτε (CTRL+F) τον παρακατω κωδικα

</head>

Kαι αμεσως ΠΡΙΝ απο αυτον επικολλειστε τον παρακατω κωδικα

 <!--JQZOOM-STARTS-->

<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>
<!--JQZOOM-STOPS-HELP@-http://bloggerstop.net-->

 (Το προσαρμοσμενο ζοομ ειναι 275x275και μπορειτε να το αλλαξετε εαν θελετε.)

2)Πατηστε αποθηκευση.

3)Πηγαινετε ΑΝΑΡΤΗΣΗ>>ΝΕΑ ΑΝΑΡΤΗΣΗ>> ΕΠΕΞΕΡΓΑΣΙΑ HTML,και επικολλειστε τον παρακατω κωδικα..

<a href="Το DIRECT LINK ΤΗΣ ΜΕΓΑΛΗΣ ΦΩΤΟ" class="jqzoom"
title="ZOOM ΣΕ ΦΩΤΟ"><img src="ΤΟ DIRECT LINK ΤΗΣ ΜΙΚΡΗΣ ΦΩΤΟ" title="justadream1" /></a>

Πριν κανετε ομως ΔΗΜΟΣΙΕΥΣΗ ΑΝΑΡΤΗΣΗΣ,τοποθετειστε τα DIRECT LINK των εικονων σας οπως σας δειχνω παραπανω..

πχ το http://img514.imageshack.us/img514/9113/big.jpg

ΖΟΟΜ ΣΕ ΦΩΤΟ (εδω βαλτε οτι ονομα θελετε)

Aφου βαλετε τα links των εικονων σας πατηστε ΔΗΜΟΣΙΕΥΣΗ ,και δειτε τι ομορφα θα δειχνει..

Στο δευτερο παραδειγμα απλα βαλτε τον αριθμο 2 μετα απο το jqzoom..

Δηλαδη να φαινεται ετσι  class="jqzoom2" .

Για οποιαδηποτε απορια,γραψτε στα σχολια, διοτι μπορει να ειναι και απορια αλλων.

Ευχαριστω και καλη διασκεδαση..

Πηγη εδω