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

Γεια σας. Όλοι θα έχετε δει, κάνοντας κλικ σε μία φωτογραφία σε κάποιο site ή blog, ότι ανοίγει στο ίδιο παράθυρο, με συνέπεια να πατάτε το βελάκι πίσω για να επιστρέψετε στο blog που διαβάζατε. Αποτέλεσμα αυτού είναι να περιμένετε να ξαναφορτώσει η σελίδα ή ακόμα χειρότερα να κλείσετε κατά λάθος με Χ την εικόνα, με αποτέλεσμα να απομακρύνεστε και από το site που ήσασταν. Αυτό δεν θα ήταν ότι καλύτερο για το blog σας, και θα κούραζε τους αναγνώστες σας.
Βέβαια έχετε την επιλογή του target_blank, όπου βάζοντάς το στον html κωδικό της φωτογραφίας, αυτή ανοίγει αυτόματα σε νέο παράθυρο.
Σήμερα όμως έχω να προτείνω και έναν άλλο τρόπο. Να ανοίγει η εικόνα μας σε ένα καινούριο pop up παράθυρο.
Φαίνετε πολύ πιο όμορφο και κυρίως πολύ πρακτικό για τον επισκέπτη, ο οποίος μπορεί, (αφού την δει σε πλήρη ανάπτυξη), να την κλείσει με ένα κλικ.
Κάντε κλικ στην παρακάτω εικόνα, να δείτε πως λειτουργεί και πως φαίνετε.


Η εφαρμογή του είναι πολύ απλή και εύκολη.
Αφού ετοιμάσουμε την ανάρτησή μας, και φορτώσουμε την φωτογραφία μας, πάμε σε μορφή HTML, και βρίσκουμε τον κωδικό της φωτογραφίας.
........


Παίρνουμε για παράδειγμα την παραπάνω φωτογραφία.
Ο Html κωδικός της είναι έτσι

<a onblur="try {parent.deselectBloggerImageGracefully();} catch(e) {}" href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgxRrrG3p7Rgik1IctF9WtyVGY3-oeUP9KIf9plkwajNNLh0LZg9LyzCAUVX0yM9VYWeOMA97MqHgZDEg_8UJ2sutnH8H5m8W5C6_nFkUXoEgL6L5VURkp7GVlI4GbJ8ir2wBPcGk12wmk/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/AVvXsEgxRrrG3p7Rgik1IctF9WtyVGY3-oeUP9KIf9plkwajNNLh0LZg9LyzCAUVX0yM9VYWeOMA97MqHgZDEg_8UJ2sutnH8H5m8W5C6_nFkUXoEgL6L5VURkp7GVlI4GbJ8ir2wBPcGk12wmk/s320/__PA270229.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5473416393983477698" /></a>

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

target="_blank" onclick="window.open(this.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/AVvXsEgxRrrG3p7Rgik1IctF9WtyVGY3-oeUP9KIf9plkwajNNLh0LZg9LyzCAUVX0yM9VYWeOMA97MqHgZDEg_8UJ2sutnH8H5m8W5C6_nFkUXoEgL6L5VURkp7GVlI4GbJ8ir2wBPcGk12wmk/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/AVvXsEgxRrrG3p7Rgik1IctF9WtyVGY3-oeUP9KIf9plkwajNNLh0LZg9LyzCAUVX0yM9VYWeOMA97MqHgZDEg_8UJ2sutnH8H5m8W5C6_nFkUXoEgL6L5VURkp7GVlI4GbJ8ir2wBPcGk12wmk/s320/__PA270229.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5473416393983477698" /></a>

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

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

Να 'στε όλοι καλά, και καλό τριήμερο!

Αν βρίσκετε χρήσιμες τις αναρτήσεις μου, και θέλετε να σας έρχονται μέσω e-mail, για να ενημερώνεστε άμεσα για κάθε καινούρια ανάρτηση, κάντε ενγραφή στο RssFeed που βρίσκεται στη sidebar του Blog μου!