3 Τρόποι για να κάνετε τις φωτογραφίες στο blog σας να ξεχωρίζουν με javascript.

Σήμερα θα δούμε μερικούς τρόπους για να κάνουμε τις εικόνες στο blog μας να τραβούν τα βλέμματα και να ξεχωρίζουν με πολύ απλά βήματα .

1ος Τρόπος: Reflex.

Preview
Reflex επιτρέπει να προσθέσετε ένα Cover Flow αποτέλεσμα στις εικόνες στην ιστοσελίδα σας. Το script σας επιτρέπει να προσθέσετε μεμονωμένα σύνορα, tiltings και reflections στις εικόνες.

Λειτουργεί με όλες τις μεγάλες μηχανές αναζήτησης - Mozilla Firefox 1.5 +, Opera 9 +, Safari και IE6 +.

Για να δώσουμε στις εικόνες μας Cover Flow αποτέλεσμα κάνουμε τα εξής:
Εισάγουμε στο πρότυπο μας πάνω από την ετικέτα </head> τον παρακάτω κώδικα:

<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/reflex.js' type='text/javascript'/>

Και αποθηκεύετε το πρότυπο σας.
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιήσετε class "reflex" ενεργοποίησης.

Δείτε ένα παράδειγμα χρήσης:

<div class="image">
<img alt="" class="reflex " src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEivdbBlQmZKxZZgXvaCwqAerdrQnnnx1yB-ojPw5cH5ch8Sg4dONevBw0oACTZX3OG5rfZ01gZSIrnLuObz-xtVwCb08eg2WUYLjibrcphi6Lj1fenHjz2QRYWZ27xWkIWSX4eqJ8Vfpbw/s320/none.jpg" width="200" />
</div>

class attributes‎

Μπορείτε επίσης να προσθέσετε διαφορετικά class attributes‎ για διαφορετικά αποτελέσματα :

1. Ενεργοποίηση class "reflex"
2. διαφοροποιεί την αντανάκλαση με την προσθήκη idistance ακολουθείται από το επιθυμητό height σε pixel: class "idistance" ( - min=0 max=100 default=0 )
3. διαφοροποιεί την αντανάκλαση με την προσθήκη iheight ακολουθείται από το επιθυμητό height σε pixel: class "iheight" ( - min=10 max=100 default=33 )
4. διαφοροποιεί την αντανάκλαση με την προσθήκη iopacity ακολουθούμενη από την επιθυμητή αδιαφάνεια σε ποσοστό: class "iopacity" ( - min=0 max=100 default=33 )
5. διαφοροποιεί τα border με την προσθήκη iborder ακολουθείται από το επιθυμητό wide σε pixel: class "iborder" ( - min=0 max=100 default=0 )
6. διαφοροποιεί το χρώμα στα border με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα σε hex : class "icolor" ( - min=000000 max=ffffff default=f0f4ff )
7. διαφοροποιοει το 3D Z-Tilt direction , προσθέτοντας ένα από τα ακόλουθα:
   class "itiltright" ή class "itiltnone" ή class "itiltleft"

π.χ. <div class="image"><img src="images/left.jpg" width="200" class="reflex iopacity50" alt="" /></div>

2oς Τρόπος: Instant picture

Preview
Δίνει στις φωτογραφίες σας instant picture εφέ , επίσης μπορείτε να τις κάνετε να μοιάζουν σαν παλιές. Για να δώσουμε στις εικόνες μας instant picture αποτέλεσμα κάνουμε τα εξής :

Εισάγουμε στο πρότυπο μας πάνω από το </head> τον παρακάτω κώδικα :

<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/instant.js' type='text/javascript'/>

Και αποθηκεύετε το πρότυπο σας.
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί class="instant" ενεργοποίησης.

Δείτε ένα παράδειγμα χρήσης :

<div class="image">
<img class="instant" src="images/ΧΧΧΧ.png" width="180" height="140" border="0" alt="">
</div>

class attributes‎

Μπορείτε επίσης να χρησιμοποιήσετε διαφορετικά class attributes‎ για διαφορετικά αποτελέσματα:
1 . Ενεργοποίηση class="instant" 2. Προσθέστε σκιά, με την προσθήκη ishadow ακολουθούμενη με το επιθυμητο opacity σε ποσοστά : class "ishadow" ( - min=0 max=100 default=33 )
π.χ. class="instant ishadow40 "
3 . διαφοροποιήστε το πλαίσιο, με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα hex: class "icolor" ( - min=000000 max=ffffff default=f0f4ff )
π.χ. class="instant icolorFFFCE9 "
4 . διαφοροποιήστε την κατεύθυνση κλίσης προσθέτοντας ένα από τα ακόλουθα:
class "itiltleft" η "itiltnone" η "itiltright" π.χ. class="instant itiltleft"
5 . αποτρέψτε τη σκίαση με την προσθήκη noshading: class "noshading" π.χ. class="instant noshading"
6 . διαφοροποιήστε το σχεδιασμό των border design προσθέτοντας historical: class "historical" π.χ. class="instant historical"
7 . Στρογγυλεμένες γωνίες με την προσθήκη nocorner: class "nocorner" 8 . διατηρήστε την αναλογία διαστάσεων εικόνας προσθέτοντας preserve :
class "preserve"
9 . διαφοροποιήστε το κείμενο σχόλιων με την προσθήκη itxtcol ακολουθείται από το επιθυμητό χρώμα ως hex: class "itxtcol" ( - min=000000 max=ffffff default=000000 )
10. Παράγει το κείμενο από alt χαρακτηριστικό προσθέτοντας itxtalt: class "itxtalt" 11. Παράγει το κείμενο από το χαρακτηριστικό title με την προσθήκη itxttitle :
class "itxttitle"

Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎ :

<div class="image">
<img class="instant ishadow40 itiltleft icolorFFFCE9 historical" src="images/historical.jpg" width="400" height="400" border="0" title="onClick event" alt="">
</div>

3ος Τρόπος: filmed.

filmed σας επιτρέπει να προσθέσετε λωρίδα φωτογραφικού φιλμ και σκιά στις εικόνες σας


Preview
Για να δώσουμε στις εικόνες μας αυτό το αποτέλεσμα κάνουμε τα εξής : Εισάγουμε στο πρότυπο μας πάνω από το </head> τον παρακάτω κώδικα :

<script src='http://sites.google.com/site/mybloggerscripts/wooden_blog/filmed.js' type='text/javascript'/>

Και αποθηκεύετε το πρότυπο σας
Τώρα κάθε φορά που θα δημοσιεύετε τις φωτογραφίες σας πρέπει να χρησιμοποιηθεί class="filmed" ενεργοποίησης.

Δείτε ενα παράδειγμα χρήσης :

<div class="image">
<img src="images/test.jpg" width="150" height="100" class="filmed" alt="" />
</div>

class attributes‎

Μπορείτε και σε αυτή την περίπτωση να βάλετε διαφορετικά class attributes‎ για διαφορετικά αποτελέσματα :
1 .Ενεργοποίηση class "filmed" 2 . Διαφοροποιεί την ταινία με την προσθήκη iColor ακολουθείται από το επιθυμητό χρώμα ως hex: class "icolor" ( - min=000000 max=ffffff default=000000 )
3. Διαφοροποιεί την διαφάνεια με την προσθήκη istrip ακολουθούμενη από το επιθυμητό opacity σε ποσοστό: class "istrip" ( - min=0 max=100 default=100 )
4 . Διαφοροποιεί την αντανάκλαση , με την προσθήκη ishine ακολουθούμενη από το επιθυμητό opacity σε ποσοστά: class "ishine" ( - min=0 max=100 default=25 )
5 . Ρυθμίστε την σκιάση , με την προσθήκη ishadow ακολουθούμενη από το επιθυμητό opacity σε ποσοστά : class "ishadow" ( - min=0 max=100 default=33 )
6 . Προσθέστε softshadow : (χρήση σε μεγάλες εικόνες μόνο) class "softshadow" ( - default=false )
7 . Ρυθμίστε την σκίαση με την προσθήκη noshadow : class "noshadow" ( - default=false )

Παράδειγμα χρήσης συνδυάζοντας διαφορετικά class attributes‎

<div class="image">
<img src="images/girl.jpg" class="filmed istrip50 icolor402000" alt="" />
</div>

ή

<div class="image">
<img src="images/test.jpg" width="150" height="100" class="filmed icolor300000" alt="" />
</div>

Μπορείτε βεβαία να χρησιμοποιήσετε και τους 3 javascript κωδικούς μαζί στην ιδία σελίδα .
Λοιπόν τι περιμένετε ?!!! Δώστε ζωή στις φωτογραφίες σας.
Αν έχετε κάποια ερώτηση μπορείτε να αφήσετε τα σχόλια σας .
Καλή σας επιτυχία !