Jquery를 사용하여 여러 슬라이드 쇼 및 팝업 활성화

Question

설정 한 현재 코드에 약간의 어려움이 있습니다. 나는 다양한 프로젝트가있는 페이지를 준비 중이다. 하나를 클릭하면 전체 크기의 이미지가있는 팝업이 표시됩니다. 일부 프로젝트에는 여러 개의 이미지가 있으므로 슬라이드 쇼 속성도 추가했습니다. jquery가 img의 너비와 높이를 결정하여 각 윈도우가 첫 번째 이미지를 기반으로 고유 한 크기를 갖도록함으로써 팝업의 크기를 조정합니다. 이 두 스크립트를 혼자서 설정해도 문제가 없지만 img의 크기는 읽히지 않습니다. 또 다른 문제는 슬라이드 쇼가 이미지 목록을 다루기 때문에 첫 번째 요소를 제외하고 숨기는 것입니다. 그러나이 필터는 다른 프로젝트의 다른 모든 이미지도 숨기고 있습니다.

열린 팝업을 수평 중심으로 배치하고 상단에서 10 %를 배치하고 싶습니다 ... 컨테이너 창에 코드가 있지만 거기에 어떤 이유로 작동하지 않을 수 있습니다.

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

여기

코드의 I입니다 : 이상한 위치 그래서 난 그냥 여기

내가 더 슬라이드 쇼와 함께 팝업을 위해 사용하고있는 코드입니다 ... 10 %와 왼쪽 25 %에 그것을 설정 슬라이드 쇼가있는 팝업에 사용 :

<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

자바 스크립트에 몇 가지 문제가있는 것 같습니다. 작업 버전 및 소스 코드는 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의 크기를 점점과 관련이있다

() . 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) + "픽셀"

전체 $ (문서) .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 = ""; 
}); 
});