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

调整弹出窗口大小的问题与使用 width() 和 height() 获取第一个 img 的大小有关。如果 img 以某种方式隐藏，这些方法将返回 0。为了解决这个问题，在遍历 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 = "";
});
});