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="http://2.bp.blogspot.com/_Q6tRnBVZnko/S4lWIYUZL1I/AAAAAAAAALU/d-neTvWfn20/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 κωδικούς μαζί στην ιδία σελίδα .
Λοιπόν τι περιμένετε ?!!!  Δώστε ζωή στις φωτογραφίες σας 

Αν έχετε κάποια ερώτηση μπορείτε να αφήσετε τα σχόλια σας .

Καλή σας επιτυχία !