Pop up παράθυρο, για να βλέπετε τις εικόνες

Με αυτό το gadget μπορεί να ανοίγει η εικόνα μας σε ένα καινούριο pop up παράθυρο.
Φαίνετε πολύ πιο όμορφο και κυρίως πολύ πρακτικό για τον επισκέπτη, ο οποίος μπορεί, (αφού την δει σε πλήρη ανάπτυξη), να την κλείσει με ένα κλικ.
Κάντε κλικ στην παρακάτω εικόνα, να δείτε πως λειτουργεί και πως φαίνεται.



Αφού ετοιμάσουμε την ανάρτησή μας, και φορτώσουμε την φωτογραφία μας, πάμε σε μορφή HTML, και βρίσκουμε τον κωδικό της φωτογραφίας.
Παίρνουμε για παράδειγμα την παραπάνω φωτογραφία.
Ο Html κωδικός της είναι έτσι:
 
<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcmfUcfD_h8Iel8Ln7UaIsey93IJYB8zZN5Xc2eHk-rejm5pp50RbaGwlqjJ-zb0U7RCd2kEz2kPUyd1e1cjndru0MdHrdb1DvnRllTWn_u1JpNfB0RhUE5Qqtal67twnQItoJ18n14Q/s1600/__PA270229.jpg"><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcmfUcfD_h8Iel8Ln7UaIsey93IJYB8zZN5Xc2eHk-rejm5pp50RbaGwlqjJ-zb0U7RCd2kEz2kPUyd1e1cjndru0MdHrdb1DvnRllTWn_u1JpNfB0RhUE5Qqtal67twnQItoJ18n14Q/s320/__PA270229.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5473416393983477698" /></a>

Παίρνουμε τώρα τον παρακάτω κωδικό:

target="_blank" onclick="window.openundefinedthis.href, 'popupwindow', 'width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;"

και τον προσθέτουμε αμέσως πριν το κλείσιμο (>) του κωδικού της φωτό.
Θα φαίνεται δηλαδή έτσι

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcmfUcfD_h8Iel8Ln7UaIsey93IJYB8zZN5Xc2eHk-rejm5pp50RbaGwlqjJ-zb0U7RCd2kEz2kPUyd1e1cjndru0MdHrdb1DvnRllTWn_u1JpNfB0RhUE5Qqtal67twnQItoJ18n14Q/s1600/__PA270229.jpg" target="_blank" onclick="window.open(this.href, 'popupwindow', 'width=800, height=440, resizable=no, scrollbars=yes, menubar=no, toolbar=no, status=no'); return false;" ><img style="display:block; margin:0px auto 10px; text-align:center;cursor:pointer; cursor:hand;width: 320px; height: 175px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEcmfUcfD_h8Iel8Ln7UaIsey93IJYB8zZN5Xc2eHk-rejm5pp50RbaGwlqjJ-zb0U7RCd2kEz2kPUyd1e1cjndru0MdHrdb1DvnRllTWn_u1JpNfB0RhUE5Qqtal67twnQItoJ18n14Q/s320/__PA270229.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5473416393983477698" /></a>

Ένα σημείο που πρέπει να προσέξετε, είναι η ρύθμιση των διαστάσεων του παραθύρου (αυτό με τα κόκκινα γράμματα). Καλό θα είναι να το προσαρμόσετε ανάλογα με τις διαστάσεις της κάθε εικόνας ξεχωριστά. Και να μην το κάνετε, δεν τρέχει τίποτα. Απλά αν είναι μεγαλύτερη η φωτό θα δημιουργηθούν μπάρες κύλισης κάτω και δεξιά, ενώ αν είναι μικρότερη θα έχει άσπρο κενό στα περιθώρια της εικόνας.

Πατάμε δημοσίευση, και αν πάτε τώρα στην ανάρτηση και κάνετε κλικ στην εικόνα, θα εμφανιστεί σε pop up παράθυρο.