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 παράθυρο.
Να 'στε όλοι καλά, και καλό τριήμερο!



Add To Facebook Add To Twitter Add To Yahoo Stumble This Fav This With Technorati Add To Del.icio.us Digg This Add To Reddit

3 σχόλια:

χαραυγή είπε...

Καταρχήν καλώς σε βρήκα και καλή εβδομάδα.
Θέλω τη βοήθεια σου γιατί μάλλον είμαι άσχετη.
Όταν λες πριν το κλείσιμο, τι εννοείς;Αν λες πριν το >,δε γίνεται.Μήπως φταίει που δεν μπορώ να βρω άκρη ότι η φωτογραφία είναι δικιά μου ή ότι την αναρτώ με λάθος τρόπο;Εγώ αναρτώ τις φωτογραφίες που έχω βγάλει μέσα από τη σύνθεση και το εικονίδιο Εισαγωγή εικόνας.Ευχαριστώ πολύ.

ekabitis είπε...

Χαραυγή, καλώς ήρθες στην bloggoσφαιρα, και καλή διαμονή.
Το "κλείσιμο" είναι ακριβώς όπως το είπες. Σε μία φωτό όμως συνήθως έχει δύο!
Πχ "άνοιγμα" a href ........ "κλείσιμο""άνοιγμα" img ........... /"κλείσιμο"
Εσύ το βάζεις στο πρώτο κλείσιμο.
Αν δεν τα καταφέρεις, στείλε μου με mail μία φωτό να στη φτιάξω και να στη ξαναστείλω. Να την έχεις σαν οδηγό και για τις υπόλοιπες.
Καλή σου μέρα.

Ανώνυμος είπε...

Είσαι φοβερός!!! Μου έχουν δουλέψει όλα τα κόλπα σου. Συνέχισε την καλή δουλειά!!!

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