ठीक है मेरे पास एक लाइटबॉक्स है जो 1 समस्या को छोड़कर काफी अच्छी तरह से काम करता है। छवियों को गतिशील रूप से बनाया गया है, यह प्रत्येक छवि को एक पंक्ति पर प्रदर्शित करने के माध्यम से 10 छवियों और लूप कहने की एक सूची प्राप्त करता है। तो मैं देख सकता हूं कि क्या गलत हो रहा है। इससे कोई फर्क नहीं पड़ता कि मैं किस छवि को लाइटबॉक्स में पहली छवि दिखा रहा हूं, इसलिए मुझे इसे छवि पथ या छवि नाम के साथ एक चर को पारित करने की आवश्यकता है।गतिशील छवि नाम लोड करते समय लाइटबॉक्स समस्या
मैं वास्तव में न कि ज्यादा जावास्क्रिप्ट अनुभव लेकिन क्या im करने के लिए उम्मीद कर रहा एक चर में $popup_item->attributes()->name डाल दिया जाता है, यह onclick घटना के माध्यम से div अंदर पारित और फिर id="light" साथ $popup_item->attributes()->name गुजर के बजाय मैं चर पारित लेकिन यकीन है कि अगर ऐसा नहीं किया है कि सबसे अच्छा तरीका या यहां तक कि जहां
शुरू करने के लिए है, जिसके माध्यम से इस लूप और पॉपअप कंटेनर समय की एक गुच्छा बाहर प्रिंट की तरह एक पाश है:
foreach($xml->config->popup as $popup_item){
}
और html
0,123,<div id="popup_container">
<!-- We use a lightbox to show the image in full size since large popups are scaled -->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">
<!-- This is the scaled image -->
<!--popups are stored in images/popups/images/ in the following format -->
<!--id_popupname.png which we build dynamically below because -->
<!-- the popup name will always be same name as the popupimage with the user id preceeding it -->
<img src="images/popups/images/<?php echo $item_id . "_" . strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/>
</a>
<!--This holds the un-scaled image in the popup box which is hidden initially until you click the image-->
<div id="light" class="white_content">
<img src="images/popups/images/<?php echo $item_id . "_" . strtolower($popup_item->attributes()->name) . ".png" ;?>" alt="Popup Image"/></a>
<!--This allows you to close the lightbox window from within the lightbox window-->
<a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>
</div> <!--end of popup container-->
और मामले में लाइटबॉक्स सीएसएस यह मदद करता है:
.black_overlay{
display: none;
position: fixed;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index:1001;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=60);
}
.white_content {
display: none;
position: fixed;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index:1002;
overflow: auto;
}
संपादित करें: असल में मैं 2 चर, $item_id और $popup_item->attributes()->name लेकिन अवधारणा पारित करने के लिए की आवश्यकता होगी है एक ही
आपके पास दूसरे 'img' टैग के बाद एक अतिरिक्त (* खोला *)' 'है .. –