Jquery to activate multiple slideshows and popups

Question

Hey Guys,

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.

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...

Here is the code I am using for the popups with no slide show:

<div class="projectPopup" id="lova">
    <a class="close">Close &times;</a>
    <img src="/img/lova_popup_slide01.jpg" alt="" />
    <p class="description">Description</p>
</div>

Here is the code I am using for the popups with a slide show:

<div class="projectPopup" id="rbex">
    <a class="close">Close &times;</a>  
 <ul class="slideImages">  
            <li><a href="#slide1" class="active" >1</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide2">2</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide3">3</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide4">4</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide5">5</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide6">6</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide7">7</a>&nbsp;/&nbsp;</li>
            <li><a href="#slide8">8</a></li>
        </ul>
        <img id="slide1" src="/img/rbex_popup_slide01.jpg" alt="Image 1 slideshow" />
        <img id="slide2" src="/img/rbex_popup_slide02.jpg" alt="Image 2 slideshow" />
        <img id="slide3" src="/img/rbex_popup_slide03.jpg" alt="Image 3 slideshow" />
        <img id="slide4" src="/img/rbex_popup_slide04.jpg" alt="Image 4 slideshow" />
        <img id="slide5" src="/img/rbex_popup_slide05.jpg" alt="Image 5 slideshow" />
        <img id="slide6" src="/img/rbex_popup_slide06.jpg" alt="Image 6 slideshow" />
        <img id="slide7" src="/img/rbex_popup_slide07.jpg" alt="Image 7 slideshow" />
        <img id="slide8" src="/img/rbex_popup_slide08.jpg" alt="Image 8 slideshow" />
        <p class="description">Description</p>
</div>

Here is the Jquery I am using:

$(document).ready(function() {
    //Hiding all Divs
    $(".projectPopup").hide();

    //Setting DIV name to nothing
    var actualOpenID = "";

    //Slideshow Image to hide rest
    var image = $('.projectPopup > 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 & 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 = "";
    });
    });

The problems can be seen here: http://www.samuelfarfsing.com/test.php

The working slideshow on its own here: http://www.samuelfarfsing.com/slides.php

Any help is much appreciated!

Answer 1

It looks like you have a few problems in your javascript. View http://jsbin.com/ahide for a working version and source code.

First,

//Slideshow Image to hide rest
var image = $('.projectPopup > img');
image.hide().filter(':first').show();

This code is going to hide all the images in the popups and then only show the first image in the collection which is inside the A.Effect projectPopup. Since you need to show the first image in each popup, loop through them individually like:

//Slideshow Image to hide rest 
$(".projectPopup").each(function(){ 
  $("img", this).hide().filter(":first").show(); 
});

The problem with resizing the popup has to do with getting the size of the first img using width() and height(). These methods will return 0 if the img is hidden in some way. To fix this, while looping through the projectPopups, temporarily show them off screen so you are able to get the width and height of the first image. This should fix that:

//Slideshow Image to hide rest 
$(".projectPopup").each(function(){ 
  $("img", this).hide().filter(":first").show(); 

  //Determine popup width and height 
var container = $(this); 

if (container.is(":hidden")) { 
            container.css({ position: "absolute", visibility: "hidden", display: "block" }); 
        } 

var popupWidth = container.find("img:first").width()+10; 
var popupHeight = container.find("img:first").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); 

//Set popup CSS 
container.css({"position": "fixed", "background": "#000", "top": "10%", "left": "20%", visibility: "", display: "none"}); 

});

Now, to get them centered in the middle of the screen, you can set the left property to (windowWidth / 2) - (popupWidth / 2) + "px"

The whole $(document).ready() should be the following:

$(document).ready(function() {
//Hiding all Divs
$(".projectPopup").hide();

//Setting DIV name to nothing
var actualOpenID = "";

//Slideshow Image to hide rest
$(".projectPopup").each(function(){
  $("img", this).hide().filter(":first").show();

  //Determine popup width and height
var container = $(this);

if (container.is(":hidden")) {
            container.css({ position: "absolute", visibility: "hidden", display: "block" });
        }

var popupWidth = container.find("img:first").width()+10;
var popupHeight = container.find("img:first").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);

//Set popup CSS
container.css({"position": "fixed", "background": "#000", "top": "10%", "left": (windowWidth / 2) - (popupWidth / 2) + "px", visibility: "", display: "none"});

});



//Find & Open
$(".projectThumb").click(function(){
        if (actualOpenID !== "") {
                $("div[id="+actualOpenID+"]").hide();
        }
        var newID = $(this).children("img").attr("name");
        $("div[id="+newID+"]").show();
        actualOpenID = newID;
        });


$('ul.slideImages li a').click(function () {
        if (this.className.indexOf('active') == -1){
                var images = $(this).closest(".projectPopup").find("img");
                images.hide();
                images.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 = "";
});
});