Αναρτήσεις
Γεια σας. Όλοι θα έχετε δει, κάνοντας κλικ σε μία φωτογραφία σε κάποιο 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/AVvXsEgY38vha0ZWRJMjxnWs06MyPfzt3TwDJhSIqyD77qwE98jwXwZlYLy46uq9LTiwN1-kCpoEzhUAPUeBtDw-yASPXfFC-5_JesjLgOCXrRGaiQC6KBDlpTOJEquA3E08RUj6rAwrUtdexkY/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/AVvXsEgY38vha0ZWRJMjxnWs06MyPfzt3TwDJhSIqyD77qwE98jwXwZlYLy46uq9LTiwN1-kCpoEzhUAPUeBtDw-yASPXfFC-5_JesjLgOCXrRGaiQC6KBDlpTOJEquA3E08RUj6rAwrUtdexkY/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/AVvXsEgY38vha0ZWRJMjxnWs06MyPfzt3TwDJhSIqyD77qwE98jwXwZlYLy46uq9LTiwN1-kCpoEzhUAPUeBtDw-yASPXfFC-5_JesjLgOCXrRGaiQC6KBDlpTOJEquA3E08RUj6rAwrUtdexkY/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/AVvXsEgY38vha0ZWRJMjxnWs06MyPfzt3TwDJhSIqyD77qwE98jwXwZlYLy46uq9LTiwN1-kCpoEzhUAPUeBtDw-yASPXfFC-5_JesjLgOCXrRGaiQC6KBDlpTOJEquA3E08RUj6rAwrUtdexkY/s320/__PA270229.jpg" border="0" alt="" id="BLOGGER_PHOTO_ID_5473416393983477698" /></a>
Ένα σημείο που πρέπει να προσέξετε, είναι η ρύθμιση των διαστάσεων του παραθύρου (αυτό με τα κόκκινα γράμματα). Καλό θα είναι να το προσαρμόσετε ανάλογα με τις διαστάσεις της κάθε εικόνας ξεχωριστά. Και να μην το κάνετε, δεν τρέχει τίποτα. Απλά αν είναι μεγαλύτερη η φωτό θα δημιουργηθούν μπάρες κύλισης κάτω και δεξιά, ενώ αν είναι μικρότερη θα έχει άσπρο κενό στα περιθώρια της εικόνας.
Αυτό ήταν όλο. Πατάμε δημοσίευση, και αν πάτε τώρα στην ανάρτηση και κάνετε κλικ στην εικόνα, θα εμφανιστεί σε pop up παράθυρο.
Post by Ekabitis
| 
5 comments:
Το δοκίμασα αλλά ανοίγει απλά η φώτο σε νέα καρτέλα και όχι σε popup. Το γιατί δεν μπορώ να το καταλάβω γιατί η δική σου φώτο ανοίγει σε popup και στο δικό μου blog όχι. Με ενδιαφέρει πολύ γιατί εκτός από τις φώτο που βάζεις ένα απλό target="_blank" και ξεμπερδεύεις έχω κάποια ραδιόφωνα στην σελίδα μου που θέλω να τα ανοίγω σε popup.
Τελικά εγώ έκανα ένα λάθος και δεν δούλευε το popup. Ευχαριστώ και συγνώμη για το ατυχές σχόλιο...
Πρέπει να κάνεις διόρθωση στον κώδικα... Αυτός με τα μαύρα γράμματα είναι λάθος στο σημείο openundefinedthis.href
ο σωστός είναι παρακάτω με τα πορτοκαλί open(this.href. Με αυτόν τον κώδικα στα μαύρα δεν ανοίγει popup ενώ με τον πορτοκαλί ανοίγει. Ευχαριστώ και πάλι γιατί παρά το μπερδεματάκι έκανα τελικά την δουλειά μου.
Αντιγράφω και τα δύο πριν το < και δε γίνεται τίποτα.Ας με βοηθήσει κάποιος.
οταν ανοιγει η φωτογραφια,ανοιγει και σε νεο παραθυρο και σε pop up παραθυρο,οπως και το δικο σου παραδειγμα.Πως θα το κανω να ανοιγει ΜΟΝΟ σε pop up παραθυρο;
Ευχαριστω!
Δημοσίευση σχολίου
Παρακαλούμε τους φίλους αναγνώστες:
ΟΧΙ SPAM,
ΟΧΙ GREEKLISH,
ΟΧΙ ΠΡΟΣΒΛΗΤΙΚΑ ΣΧΟΛΙΑ
Παρακαλώ το σχόλιό σας να είναι σχετικό με την παραπάνω ανάρτηση.
Γενικές απορίες μόνο στη σελίδα μας στο facebook.