Problima me iframe

Leatherwolfgr · 13 Μαΐου 2005

Kataskevazo ena site sto opio ipaxi kai ena section me fotografies. Auto xorizete se 3 katigories kathemia apo tis opies periexi diafora foto albums. Eftiaksa mia efarmogi se php pou elenxei pio fotoalbum dialekse o xristis na dei kai to anigei sto antistixo template. To template apotelite apo kapoia grafika kai 2 iframes. To ena (thoumbnails) exei ta thumbnails kai sto allo anigei tis foto(photo). Etsi loipon i foto test_thumb.jpg kanei link stin foto test.jpg me target photo. To problima einai oti eno to background tou iframe photo einai mauvo meta to click apokta aspo background to opoio einai kai apolitos logiko.

1. Exei kanenas kamia idea gia to pos tha diatiriso to background tou iframe photo mauvo?

2. Mia enalaktiki lisi pou skeftika einai na kano to iframe na pernei kathe fora tis diastaseis tis foto pou periexei oste na min fainetai oti alazei xroma, alla den exo idea pos na to kano...

Please help!

Euxarosto poli!

Dikemou · 14 Μαΐου 2005

dokimase na to baleis se css sto opoio ta background xromata gia ola ta states (selected, visited ktl) einai panta to idio (mauro)

Skeftomilos · 15 Μαΐου 2005

Το πρόβλημα μάλλον είναι ότι δε μπορείς να ελέγξεις το background από τη στιγμή που τοποθετείς στο iframe μία εικόνα αντί για σελίδα HTML. Μία ιδέα επομένως είναι να ετοιμάσεις από μία σελιδούλα HTML με μαύρο φόντο για κάθε εικόνα, και να βάλεις αυτή στο link. Επειδή αυτό μπορεί να είναι αρκετή δουλειά, μπορείς να αυτοματοποιήσεις τη διαδικασία με JavaScript. Το μειονέκτημα είναι ότι το μικρό ποσοστό που δεν έχει JavaScript θα δει άσπρο το background. Ο κώδικας της κύριας σελίδας (Index.htm) είναι ο παρακάτω:

><html>
 <head>
   <title>Index</title>
 </head>
 <body>
   <h2>Index</h2>
   <a href="hello.png" target="photo" onclick="this.href='photo.htm?src=hello.png'">Link<a>
   <br><br>
   <iframe src="photo.htm" name="photo" style="background:black"></iframe>
 </body>
</html>

Δηλαδή αν υπάρχει JavaScript θα αλλάξει αυτόματα το link να δείχνει στη σελίδα photo.htm αντί για την εικόνα. Η σελίδα photo.htm μόλις φορτωθεί στο iframe διαβάζει το querystring και αν βρει παράμετρο src δημιουργεί ένα element img και το προσθέτει στο body:

><html>
 <head>
   <style type="text/css">
     body {
       background-color:black;
     }
   </style>
   <script type="text/javascript">
     window.location.querystring = function(key) {
       if (this.search) {
         var re = new RegExp("[\\?&]" + key + "=(.*?)(?:[\\?&]|$)" ,"i")
         if (re.test(unescape(this.search))) {
           return unescape(RegExp.$1.replace(/\+/g, " "))
         }
       }
     }
     window.onload = function() {
       var src = window.location.querystring("src")
       if (src) {
         var element = document.createElement("img")
         element.setAttribute("src", src)
         document.body.appendChild(element)
       }
     }
   </script>
 </head>
 <body>
 </body>
</html>

Έτσι με δύο σελίδες θα κάνεις τη δουλειά σου. Πάντως η λύση iframe έχει γενικότερα μειονεκτήματα. Τα iframe δεν προσαρμόζουν το μέγεθός τους στα περιεχόμενά τους και αφήνουν κενό χώρο ή βγάζουν scrollbars. Μία πιο ενδιαφέρουσα επιλογή είναι να εμφανίσεις τις εικόνες μέσα σε ένα κοινό HTML element όπως table cell ή div. Έτσι δε θα χρειαστείς καν τη δεύτερη σελίδα. Για να γίνει αυτό χρειάζεται ένα hack, αλλά δουλεύει περίφημα. Αν σε ενδιαφέρει δες εδώ.

Leatherwolfgr · 16 Μαΐου 2005

Sas euxaristo poli kai tous 2 pou mpikate ston kopo na apantisete!

Skeftomile me esoses! Spao to kefali mou edo kai 4-5 meres kai den mporousa na bro ti lisi. Distixos den mporousa na ftiakso mia selida gia tin kathe foto giati i selida dialegei dinamika tis foto tous dinei ta links. To iframe itan i moni lisi pou mporesa na skefto an kai prepei na omologiso oti miso genikotera ta frames... Telika nomizo oti tha dialekso tin lisi apo to quiz sou. Pote den eixa skeftei kati tetoio. Poli eksipno. Kai pali euxaristo poli.

Gia osous endiaferontai i to url tis selidas einai http://www.x-piral.com

Skeftomilos · 16 Μαΐου 2005

Μία άλλη εξαιρετικά απλή ιδέα είναι να έχεις ως στόχο ένα απλό img και να του αλλάζεις το src. Π.χ.:

><html>
 <body>
   <h2>Index</h2>
   <a href="javascript:;" onclick="document.images.photo.src='hello.png'">Link<a>
   <br><br>
   <img name="photo" src="empty.png">
 </body>
</html>

Η εικόνα empty.png εμφανίζεται μόνο στην αρχή και πρέπει να είναι κενή, διαφανής κατά προτίμηση. Η τεχνική αυτή απαιτεί JavaScript, επομένως δεν είναι ότι καλύτερο. Μία πιο σοφιστικέ παραλλαγή είναι να βάλεις στόχο ένα image στο εσωτερικό ενός iframe. Θα χρειαστούν δύο σελίδες πάλι. Η πρώτη (index.htm):

><html>
 <body>
   <h2>Index</h2>
   <a href="hello.png" target="photo" onclick="frames.photo.document.images.photo.src='hello.png'; return false">Link<a>
   <br><br>
   <iframe src="photo.htm" name="photo"></iframe>
 </body>
</html>

Και η δεύτερη (photo.htm):

><html>
 <head>
   <style type="text/css">
     body {
       background-color:black;
     }
   </style>
 </head>
 <body>
   <img name="photo" src="empty.png">
 </body>
</html>

Τώρα λειτουργεί και χωρίς JavaScript.

Σύνδεση

Problima me iframe

Προτεινόμενες αναρτήσεις

Leatherwolfgr

Dikemou

Skeftomilos

Leatherwolfgr

Skeftomilos

Αρχειοθετημένο

Σύνδεση