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/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以某种方式隐藏，这些方法将返回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"}); 

}); 

现在，为了让他们在屏幕的正中，可以左属性设置为（WINDOWWIDTH/2） - （popupWidth/2）+ “PX”

整个$（文件）。就绪（）应该是以下几点：

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