Jquery для активации нескольких слайд-шоу и всплывающих окон

Question

У меня возникли некоторые трудности с этим текущим кодом, который я настроил. Я настраиваю страницу с различными проектами. При щелчке по одному из них появляется всплывающее окно с полноразмерным изображением. В некоторых проектах есть несколько изображений, поэтому я также добавил свойство слайд-шоу. Я определяю размер всплывающего окна, заставляя jquery определять ширину и высоту img, чтобы каждое окно имело уникальный размер на основе первого изображения. Когда я настраивал эти два сценария по отдельности, они работали нормально, но теперь, когда я реализую их вместе, размер img не читается. Другая проблема заключается в том, что поскольку слайд-шоу имеет дело со списком изображений, оно скрывает все, кроме первого ... Однако этот фильтр также скрывает все другие изображения в других проектах.

Я также хотел бы расположить открытое всплывающее окно по центру по горизонтали и на 10% сверху ... У меня есть код для окна контейнера, но я не могу заставить его работать по какой-то причине, так как он дает мне странная позиция, поэтому я просто установил ее на 10% и 25% слева ...

Вот код, который я использую для всплывающих окон без слайд-шоу:

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

Вот код, который я использую для всплывающих окон со слайд-шоу:

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

Вот Jquery, который я использую:

$(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 = "";
    });
    });

Проблемы можно увидеть здесь: http://www.samuelfarfsing.com/test.php

Рабочее слайд-шоу самостоятельно здесь: http://www.samuelfarfsing.com/slides.php

Любая помощь очень ценится!

Answer 1

Похоже, у вас есть несколько проблем в вашем JavaScript. Просмотр http://jsbin.com/ahide рабочей версии и исходного кода.

Во-первых,

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

Этот код скрывает все изображения во всплывающих окнах, а затем показывает только первое изображение в коллекции, которое находится внутри A.Effect projectPopup. Так как вам нужно показать первое изображение в каждом всплывающем окне, просматривайте их по отдельности, например:

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

Проблема с изменением размера всплывающего окна связана с получением размера первого img с использованием width () и height (). Эти методы вернут 0, если img каким-то образом скрыт. Чтобы это исправить, во время циклического просмотра проектов ProjectPopups временно покажите их за пределами экрана, чтобы вы могли получить ширину и высоту первого изображения. Это должно исправить это:

//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"}); 

}); 

Теперь, чтобы расположить их по центру экрана, вы можете установить для свойства left значение (windowWidth / 2) - (popupWidth / 2) + "px"

Весь $ (document) .ready () должен быть следующим:

$(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 = "";
});
});