Databases
StackOverflow2013
Postsdbo
POJquery to activate multiple slideshows and popups
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POJquery to activate multiple slideshows and popups
    primarykey
    data
    text
    <p>I am having a bit of difficulty with this current code I have set up. I am setting up a page with various projects. When one is clicked, the idea is that there will be a popup with a full size image. Some projects have multiple images, so I also added a slide show property. I am sizing the popup by having jquery determine the img width and height so that each window will have a unique size based on the first image. When I set up these two scripts alone, they work fine, but now that I am implementing them together, the size of the img is not being read. Another issue is that since the slideshow deals with a list of images, it is hiding all but the first… However this filter is also hiding all the other images in other projects.</p> <p>I would also like to position the opened popup centered horizontally and 10% from the top… I have the code in there for the container window but I can't seem to get it to work for some reason as it gives me a strange position so I just set it at 10% and 25% from left...</p> <p>Here is the code I am using for the popups with no slide show:</p> <pre><code>&lt;div class="projectPopup" id="lova"&gt; &lt;a class="close"&gt;Close &amp;times;&lt;/a&gt; &lt;img src="/img/lova_popup_slide01.jpg" alt="" /&gt; &lt;p class="description"&gt;Description&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here is the code I am using for the popups with a slide show:</p> <pre><code>&lt;div class="projectPopup" id="rbex"&gt; &lt;a class="close"&gt;Close &amp;times;&lt;/a&gt; &lt;ul class="slideImages"&gt; &lt;li&gt;&lt;a href="#slide1" class="active" &gt;1&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide2"&gt;2&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide3"&gt;3&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide4"&gt;4&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide5"&gt;5&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide6"&gt;6&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide7"&gt;7&lt;/a&gt;&amp;nbsp;/&amp;nbsp;&lt;/li&gt; &lt;li&gt;&lt;a href="#slide8"&gt;8&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;img id="slide1" src="/img/rbex_popup_slide01.jpg" alt="Image 1 slideshow" /&gt; &lt;img id="slide2" src="/img/rbex_popup_slide02.jpg" alt="Image 2 slideshow" /&gt; &lt;img id="slide3" src="/img/rbex_popup_slide03.jpg" alt="Image 3 slideshow" /&gt; &lt;img id="slide4" src="/img/rbex_popup_slide04.jpg" alt="Image 4 slideshow" /&gt; &lt;img id="slide5" src="/img/rbex_popup_slide05.jpg" alt="Image 5 slideshow" /&gt; &lt;img id="slide6" src="/img/rbex_popup_slide06.jpg" alt="Image 6 slideshow" /&gt; &lt;img id="slide7" src="/img/rbex_popup_slide07.jpg" alt="Image 7 slideshow" /&gt; &lt;img id="slide8" src="/img/rbex_popup_slide08.jpg" alt="Image 8 slideshow" /&gt; &lt;p class="description"&gt;Description&lt;/p&gt; &lt;/div&gt; </code></pre> <p>Here is the Jquery I am using:</p> <pre><code>$(document).ready(function() { //Hiding all Divs $(".projectPopup").hide(); //Setting DIV name to nothing var actualOpenID = ""; //Slideshow Image to hide rest var image = $('.projectPopup &gt; img'); image.hide().filter(':first').show(); //Determine popup width and height var container = $(".projectPopup", this); var popupWidth = container.find("img").width()+10; var popupHeight = container.find("img").height()+60; //Determine window width and height var windowWidth = document.documentElement.clientWidth; var windowHeight = document.documentElement.clientHeight; container.css("width" , popupWidth); container.css("height" , popupHeight); //Find &amp; Open $(".projectThumb").click(function(){ if (actualOpenID !== "") { $("div[id="+actualOpenID+"]").hide(); } var newID = $(this).children("img").attr("name"); $("div[id="+newID+"]").show(); actualOpenID = newID; }); //Set popup CSS container.css({"position": "fixed", "background": "#000", "top": "10%", "left": "20%"}); $('ul.slideImages li a').click(function () { if (this.className.indexOf('active') == -1){ image.hide(); image.filter(this.hash).show(); $('ul.slideImages li a').removeClass('active'); $(this).addClass('active'); } return false; }); //Close property $("a.close").click(function (e) { e.preventDefault(); $(this).parent().hide(); actualOpenID = ""; }); }); </code></pre> <p>The problems can be seen here: <a href="http://www.samuelfarfsing.com/test.php" rel="nofollow noreferrer">http://www.samuelfarfsing.com/test.php</a></p> <p>The working slideshow on its own here: <a href="http://www.samuelfarfsing.com/slides.php" rel="nofollow noreferrer">http://www.samuelfarfsing.com/slides.php</a></p> <p>Any help is much appreciated!</p>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. This table or related slice is empty.
    1. USantonanton
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload