3 Τρόποι για να κάνετε τις φωτογραφίες στο blog σας να ξεχωρίζουν με javascript. |  Στάλες στο γαλάζιο ® <link href='http://1.bp.blogspot.com/_L116RpGjEMY/TDOekSxWr1I/AAAAAAAADFY/AYlL-GvoByc/s72-c/a%5B13%5D.png' rel='https://4.bp.blogspot.com/-ucvLyH7G8ns/WNrpJ42EDOI/AAAAAAAAfwo/V5doGhzXC8QztinTcD9Jfy_YBPCPzpPOgCLcB/s640/Stales_sto_Galazio.jpg'/>

0
Σήμερα θα δούμε μερικούς τρόπους για να κάνουμε τις εικόνες στο 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 κωδικούς μαζί στην ιδία σελίδα .
Λοιπόν τι περιμένετε ?!!! Δώστε ζωή στις φωτογραφίες σας.
Αν έχετε κάποια ερώτηση μπορείτε να αφήσετε τα σχόλια σας .
Καλή σας επιτυχία !

Δημοσίευση σχολίου Blogger

Παρακαλώ, την προσοχή σας ! ! !

* Εάν εντοπίσετε κάποιο πρόβλημα σε κάποια δημοσίευση (μη ενεργός συνδεσμος λ.χ. ή οτιδήποτε άλλο), παρακαλούμε κάντε τον κόπο να γράψετε στα σχόλιά σας, το οποιοδήποτε πρόβλημά σας, ώστε να προβούμε στην άμεση διόρθωσή του.
Επίσης, μπορείτε να αποστείλετε ένα "Ευχαριστώ" προς όσους ασχολήθηκαν & σας προσέφεραν ένα... κομμάτι από τη γνώση τους.

Παράκληση προς τους φίλους αναγνώστες-σχολιαστές:

* Να αποφεύγετε να γράφετε με greekglish γιατί τα σχόλιά σας ΔΕΝ θα γίνονται δεκτά.
* Αποφεύγετε το spamάρισμα στα σχόλια. - Please don't spam me!
* Σε περίπτωση που δεν έχετε καταλάβει κάτι, επικοινωνήστε μαζί μας μέσα από την φόρμα των σχολίων και θα σας απαντήσουμε σε εύλογο χρόνο, γι' αυτό ΜΗΝ καταφεύγετε στη αποστολή e-mail για τις όποιες απορίες σας.
* Χρησιμοποιήστε το Reply (που βρίσκεται κάτω από την εικόνα χρήστη), αν θέλετε να του απευθύνετε το λόγο, ή να απαντήσετε σε προυγούμενο σχόλιο.
* Το μέγιστο όριο χαρακτήρων είναι 4.096
* Τα σχόλιά σας θα δημοσιεύονται μετά τον απαραίτητο έλεγχο.

Σημείωση: Όσοι θέλετε να παίρνετε ειδοποιήσεις για τα σχόλια που κανετε, μην ξεχάσετε να τικάρετε το κουμπί "Να λαμβάνω ειδοποιήσεις"

Σας Ευχαριστούμε για την κατανόηση και την επίσκεψή σας.!

 
Top
Blogger Tutorials

Δημιουργήστε τώρα ένα ιδανικό ιστολόγιο, χωρίς να ξοδέψετε ούτε 1€.Περισσότερα από 500 tutorials είναι στη διάθεσή σας.
Οι διαχειριστές του ιστολογίου «Στάλες στο γαλάζιο» σας συμβουλεύουν...
Αποφεύγετε την οποιαδήποτε προσφερόμενη "βοήθεια" από τυχάρπαστους και κατ' επίφαση "web designers", που από ιδιοτέλεια και μόνο προσπαθούν να εκμεταλλευθούν την άγνοιά σας!!!
Με εκτίμηση
«Στάλες στο γαλάζιο»
:-)