Pretty box effect για εικονες του Blog σας με JQuery.

 Σημερα θα σας δειξω κατι που θα φανει πολλη χρησιμο σε αυτους που εχουν πολλες εικονες στο Blog τους και θελουν να βαλουν ενα πολλη ωραιο Effect δηλαδη κατι που να τις ανοιγει τις εικονες τους με εναν μαγικο τροπο απομονοντας ολα τα που υαπρχουν στο Blog τους και επικεντρονοντας μονο στην εικονα που θελουν να δουν γι αυτο και σημερα σας εχω ενα παρα πολλη ωραιο Effect. (Το Demo οπως παντα θα το βρειτε στο τελος τις αναρτησης).

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

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

Προσοχή:

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

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

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

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

 </body>

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

 <link href='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/css/prettyPhoto.css' media='screen' rel='stylesheet' type='text/css'/><script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/><script src='http://www.no-margin-for-errors.com/wp-content/themes/NMFE/js/jquery.prettyPhoto.js' type='text/javascript'/><script type='text/javascript'>jQuery("a[rel^='prettyPhoto']").prettyPhoto();</script>

- Και παταμε αποθηκευση προτυπου.

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

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

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CX2R86QHcH1e_BKyIWjAz0qP5_s1p5C68tafi7W5K2SMX868wv8qWx-t8fT-IXKEM3axQpErz4OyWCfYEeZ_x506L7iiqg6me0KSnyJuAb0iK5Yi5eVB5AEaUaiRqbPBFwdpqcG0XYxV/s1600/part-004.jpeg" imageanchor="1" ><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CX2R86QHcH1e_BKyIWjAz0qP5_s1p5C68tafi7W5K2SMX868wv8qWx-t8fT-IXKEM3axQpErz4OyWCfYEeZ_x506L7iiqg6me0KSnyJuAb0iK5Yi5eVB5AEaUaiRqbPBFwdpqcG0XYxV/s200/part-004.jpeg" width="200" /></a>

με αλλα φυσικα με αλλα φυσικα Url. Εμεις αυτο που εχουμε να κανουμε ειναι απλα να προσθετουμε λιγο πριν το κλεισιμο τις εικονας το κωδικα:

rel="prettyphoto"

Δηλαδη θα ειναι καπως ετσι:

<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CX2R86QHcH1e_BKyIWjAz0qP5_s1p5C68tafi7W5K2SMX868wv8qWx-t8fT-IXKEM3axQpErz4OyWCfYEeZ_x506L7iiqg6me0KSnyJuAb0iK5Yi5eVB5AEaUaiRqbPBFwdpqcG0XYxV/s1600/part-004.jpeg" imageanchor="1" rel="prettyphoto" ><img border="0" height="150" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7CX2R86QHcH1e_BKyIWjAz0qP5_s1p5C68tafi7W5K2SMX868wv8qWx-t8fT-IXKEM3axQpErz4OyWCfYEeZ_x506L7iiqg6me0KSnyJuAb0iK5Yi5eVB5AEaUaiRqbPBFwdpqcG0XYxV/s200/part-004.jpeg" width="200" / rel="prettyphoto" ></a>

Σημιωση:

Τωρα αμα θελετε να εφαρμοζετε αυτο το Effect μονο στην εικονα που φαινεται στην αρχικη σας σελιδα και οχι μεσα στην αναρτηση απλα αφαιρεστε το δευτερο rel="prettyphoto.

- Για το Demo απλα πατηστε την παρακατω εικονα ή στο βιντεο:

- Για ότι πρόβλημα υπάρξει μην διστάσετε να επικοινωνήστε μαζί μας μεσώ του

κουμπιού "Επικοινωνία" που θα βρείτε πάνω πάνω.
  
- Αμα σας αρεσε παρακαλω προωθηστε το Blog μας ή πατηστε παρακολουθηση.

  Ευχαριστω.

Copyrights: BlogyTricks© 

Πηγη κωδικα: paulsantosh