Jump to content

Search the Community

Showing results for tags 'lightbox'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • W3Schools
    • General
    • Suggestions
    • Critiques
  • HTML Forums
    • HTML/XHTML
    • CSS
  • Browser Scripting
    • JavaScript
    • VBScript
  • Server Scripting
    • Web Servers
    • Version Control
    • SQL
    • ASP
    • PHP
    • .NET
    • ColdFusion
    • Java/JSP/J2EE
    • CGI
  • XML Forums
    • XML
    • XSLT/XSL-FO
    • Schema
    • Web Services
  • Multimedia
    • Multimedia
    • FLASH

Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests


Languages

Found 11 results

  1. Is it possible to use this lightbox code with multiple galleries? At the moment, when using it with different galleries, lightbox will pop up, but it only show first gallery, and the others won't display. I have implemented this lightbox code with my PHP code and for the first gallery, everything is fine, but when I click others, only those gallery thumbnails will show up, but the currentSlide isn't and I understand that code changes only in the first gallery. My code: <div class="row"> <div class="row-inner" id="ajax-posts"> <?php while( $refs->have_posts() ): $refs->the_post(); // get_template_part('content/content', 'reference'); $galleryarray = get_post_gallery_ids($post->ID); ?> <div class="gridbox reference <?php if(DOING_AJAX) {echo " added";} ?>"> <a> <div class="bg_img cursor"<?php if ( $thumbnail_id = get_post_thumbnail_id() ) { if ( $image_src = wp_get_attachment_image_src( $thumbnail_id, 'normal-bg' ) ) printf( ' style="background-image: url(%s);"', $image_src[0] ); } ?> onclick="openModal(<?php echo $i; ?>);currentSlide(<?php echo $id ?>)"> </div> <h3><?php the_title(); ?></h3> <p><?php the_time('Y'); ?><br><?php the_category( ', ' ); ?></p> </a> </div> <!-- Modal --> <div id="myModal-<?php echo $i; ?>" class="modal"> <span class="close cursor" onclick="closeModal(<?php echo $i; ?>)">&times;</span> <div class="modal-content"> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $number = $index+1; ?> <div id="img-<?php echo $id; ?>" class="mySlides"> <div class="numbertext"><?php echo $number; ?> / <?php echo count($galleryarray); ?></div> <img id="<?php echo $id; ?>" src="<?php echo $image[0]; ?>" style="width:100%"> </div> <?php } ?> <a class="prev" onclick="plusSlides(-1)">&#10094;</a> <a class="next" onclick="plusSlides(1)">&#10095;</a> <div class="caption-container"> <p id="caption"></p> </div> <?php foreach ($galleryarray as $index => $id) { $image = wp_get_attachment_image_src( $id, ‘thumb’ ); /* $attachment_meta = wp_get_attachment( $id );*/ $alt = get_post_meta( $id, '_wp_attachment_image_alt', true); $number = $index+1; ?> <div class="column"> <img id="<?php echo $id; ?>" class="demo cursor" src="<?php echo $image[0]; ?>" style="width:100%" onclick="currentSlide(<?php echo $number ?>)" alt="<?php echo $alt; ?>"> </div> <?php } ?> </div> </div> <?php $i++; endwhile; ?> </div> </div> function openModal(i) { document.getElementById('myModal-'+i).style.display = "block"; document.getElementById('pageHeader').style.zIndex = "0"; document.getElementById('pageFooter').style.zIndex = "0"; document.getElementById('pageContainer').style.textAlign = "left"; } function closeModal(i) { document.getElementById('myModal-'+i).style.display = "none"; document.getElementById('pageHeader').style.zIndex = "10"; document.getElementById('pageFooter').style.zIndex = "9"; document.getElementById('pageContainer').style.textAlign = "center"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length;} console.log(slideIndex); for (i = 0; i < slides.length; i++) { slides[i].style.display = "none"; } for (i = 0; i < dots.length; i++) { dots[i].className = dots[i].className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } Is it possible to change that code somehow to get it working, or maybe better solution is to sum up every gallery array to one, and make one Modal, where those galleries pop up only when clicking on the right gallery?
  2. grumpybc

    Lightbox reverse

    I whenever I hit on an image on the Lightbox the image is always loading in reverse to what it should be so when I hit image 4 it is showing image 1, please help me here is the code <div class="galleryrow"> <div class="column"> <img src="images/gallery image 4.jpg" style="width:90%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 3.jpg" style="width:90%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 2.jpg" style="width:90%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 1.jpg" style="width:90%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" height="195px"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <img src="images/gallery image 4.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 3.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 2.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 1.jpg" style="width:100%" height="700px"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Home"> </div> </div> </div> <script> function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>
  3. grumpybc

    Lightbox Javascript not working

    does anyone know why this doesn't work? it shows the picture but when I hit on it to maximise it, its not there. please help <div class="galleryrow"> <div class="column"> <img src="images/gallery image 10.jpg" style="width:90%" onclick="openModal();currentSlide(10)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 9.jpg" style="width:90%" onclick="openModal();currentSlide(9)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 8.jpg" style="width:90%" onclick="openModal();currentSlide(8)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 7.jpg" style="width:90%" onclick="openModal();currentSlide(7)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 6.jpg" style="width:90%" onclick="openModal();currentSlide(6)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 5.jpg" style="width:90%" onclick="openModal();currentSlide(5)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 4.jpg" style="width:90%" onclick="openModal();currentSlide(4)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 3.jpg" style="width:90%" onclick="openModal();currentSlide(3)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 2.jpg" style="width:90%" onclick="openModal();currentSlide(2)" class="hover-shadow cursor" height="195px"> </div> <div class="column"> <img src="images/gallery image 1.jpg" style="width:90%" onclick="openModal();currentSlide(1)" class="hover-shadow cursor" height="195px"> </div> </div> <div id="myModal" class="modal"> <span class="close cursor" onclick="closeModal()">×</span> <div class="modal-content"> <div class="mySlides"> <img src="images/gallery image 10.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 9.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 8.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 7.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 6.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 5.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 4.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 3.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 2.jpg" style="width:100%" height="700px"> </div> <div class="mySlides"> <img src="images/gallery image 1.jpg" style="width:100%" height="700px"> </div> <a class="prev" onclick="plusSlides(-1)">❮</a> <a class="next" onclick="plusSlides(1)">❯</a> <div class="caption-container"> <p id="caption"></p> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 10.jpg" style="width:100%" onclick="currentSlide(10)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 9.jpg" style="width:100%" onclick="currentSlide(9)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 8.jpg" style="width:100%" onclick="currentSlide(8)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 7.jpg" style="width:100%" onclick="currentSlide(7)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 6.jpg" style="width:100%" onclick="currentSlide(6)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 5.jpg" style="width:100%" onclick="currentSlide(5)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 4.jpg" style="width:100%" onclick="currentSlide(4)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 3.jpg" style="width:100%" onclick="currentSlide(3)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 2.jpg" style="width:100%" onclick="currentSlide(2)" alt="Home extenshion"> </div> <div class="column"> <img class="demo cursor" src="images/gallery image 1.jpg" style="width:100%" onclick="currentSlide(1)" alt="Home"> </div> </div> </div> <script> function openModal() { document.getElementById('myModal').style.display = "block"; } function closeModal() { document.getElementById('myModal').style.display = "none"; } var slideIndex = 1; showSlides(slideIndex); function plusSlides(n) { showSlides(slideIndex += n); } function currentSlide(n) { showSlides(slideIndex = n); } function showSlides(n) { var i; var slides = document.getElementsByClassName("mySlides"); var dots = document.getElementsByClassName("demo"); var captionText = document.getElementById("caption"); if (n > slides.length) {slideIndex = 1} if (n < 1) {slideIndex = slides.length} for (i = 0; i < slides.length; i++) { slides.style.display = "none"; } for (i = 0; i < dots.length; i++) { dots.className = dots.className.replace(" active", ""); } slides[slideIndex-1].style.display = "block"; dots[slideIndex-1].className += " active"; captionText.innerHTML = dots[slideIndex-1].alt; } </script>
  4. erashish14

    popup signup help required

    Hi All, I'm running a website i.e. http://homepageforu.webs.com/, its running good, its a simple website with HTML & CSS, I like to add one signup page/image, which fades all the background icons, until n unless, either visitor subscribe to my website, or click cancel on that signup page (this page is also unblockable i.e. doesn't blocked by pop-up blocker) & in either condition, he/she can visit my website, but if he goes for sign up, than that page should be open in a new window. i've seen this in many websites specially with online shopping or coupons website, like "http://www.shopclues.com/mobiles/mobile-phones.html", the same signup page, when this website opens. Thanks in Advance Ashish
  5. Hello, I'm having trouble getting my back and next buttons in my lightbox to work! Any help will be greatly appreciated! http://imd.edumedia....term/index.html
  6. chitrag

    lightbox issues

    Hi, I just wanted to multiple lightbox slideshows in a page with different contents in each of lightbox slideshow. How can I do ? I tested in the following page but it does not work all shows same content. http://www.egtours.com/test.php
  7. I am trying to have a link submit some form data to a lightbox ( I am using facebox) and am having some trouble. The basic code I am working with is: <form name="form" method="post" action="test.asp"><ul><li><a href="#" onclick="document.forms['form'].dept.value = 'ACC'; document.forms['form'].course.value = '115'; document.form.submit('test.asp');" rel="facebox">ACC 115 Payroll Accounting</a></li></ul><input type="hidden" value="" name="dept" id="dept"><input type="hidden" value="" name="course" id="course"></form><script type="text/javascript">$('a[rel*=facebox]').facebox({ loading_image: '/images/loading.gif', close_image: '/images/closelabel.gif' });</script> This file submits to the test.asp file which processes the XML data which the course descriptions live. <%dim dept, coursedept = "ACC"course = "115"Set objxml = Server.CreateObject("Microsoft.XMLDOM")objxml.async = falseobjxml.load (Server.MapPath("classes.xml"))set ElemClass = objxml.getElementsByTagName("class[@dept='"&dept&"' and @class='"&course&"']")set ElemTitle = objxml.getElementsByTagName("class[@dept='"&dept&"' and @class='"&course&"']/title")set ElemDescription = objxml.getElementsByTagName("class[@dept='"&dept&"' and @class='"&course&"']/description")set ElemPrereqs = objxml.getElementsByTagName("class[@dept='"&dept&"' and @class='"&course&"']/prereqs")%><!DOCTYPE html><html><head><meta charset="utf-8"><title><% Response.Write(dept&" "&course) %></title></head><body><%For i=0 To (ElemClass.length -1)%><h3><% Response.Write(ElemTitle.item(i).Text) %></h3><p><% Response.Write(ElemDescription.item(i).Text) %></p><p><% Response.Write(ElemPrereqs.item(i).Text) %></p><%nextSet objxml = Nothing%></body></html> I have gotten everything to work, except I can't seem to get the form to put the test.asp in the lightbox. Help please!!
  8. chownsy

    Table not dynamic sizing.

    I have a table layout for my picture gallery live example : http://test.repsolhondanc24.co.uk/ When you minimise it or have it on a smaller screen resolution the table does not reduce in size like the other page content section does. Where am I going wrong. I want the table to be all the same size for width and heigh per square alternatively is there a better picture gallery I can use with out using a table (I'm keeping the light-box feature)
  9. My website is getting closer to being completed but it does not validate and with over 278 errors, its annoying (im so tired now lol) Can someone look at the errors on the attached file and let me know what I need to do to correct it. (Its not the one with 278 errors as it says its too large so I uploaded the smaller page) ride-out-gallery.html
  10. knystrom18

    Phantom Image & Lightbox Script

    I'm using the script here: http://lokeshdhakar....ects/lightbox2/ As the method of displaying the images here: http://www.kylenystrom.com/new Everything works fine except for this one thing: I need to update a screenshot of a website I developed (sunset.jpg), but I don't want another image in my sites directory. So, I updated it, and overwrote it; locally and on my web server. (The file has the same name and extension, but the actual image is different.) But the old image is still displaying in the lightbox. I've overwritten both the local and server copies more than twice, but to no avail. I've removed all other images from the local directory, and deleted them from the server and predictably, the other images do not show; they're not there. But for some reason, the old "sunset.jpg" loads and displays EVERY. TIME. I've looked at the lightbox script and can't tell if it's caching images or something, but this is driving me crazy. I really don't want to have to download, unzip, and integrate a fresh copy of the lightbox script every time I update an image. Does anyone know whats going on? All my code is readily available, but I'll post it here if needed. Thanks! Edit: What's even crazier is when I type in a direct URL to the offending image, it loads and displays, but when I refresh the page, I get a 404...
  11. reflex84

    Lightbox Form "thank You" Page

    Hi, I am busy testing out a lightbox form that I'm working on and I've got all to work except the "success" or "thank you" page.Basically I want the user to fill in the online form and when the they are click 'submit', the "thank you" message or page resolves in the same lightbox that the form was in. Go to www.testing123.co.za/test.htm and click on that link you see saying "AJAX SuperBox".The lightbox is opening up an HTML page within in the test.htm page (basically acting like an iFrame?).When I click submit, the page resolves to the success.htm page (which it should) but not in the lightbox frame. I don't want visitors to leave the test.htm page. My headers at the bottom of my process php form shows as: '; $headers = "From: $from\r\nBCC:{$bcc}\r\n"; $headers .= "Content-type: text/html\r\n"; $success = mail($to, $subject, $sBodyNew, $headers); header('Location: http://www.testing123.co.za/success.htm'); ?> I assume the Location url above needs code added to it so that it works within the lightbox? Or is there an easier way to do this? Thanks guys!
×