jquery - 複数のスライドショーとポップアップをアクティブ化するJquery

Question

私が設定したこの現在のコードに少し問題があります。いろいろなプロジェクトのページを作っています。クリックすると、フルサイズの画像を含むポップアップが表示されます。一部のプロジェクトには複数の画像があるため、スライドショープロパティも追加しました。jqueryにimgの幅と高さを決定させてポップアップのサイズを変更し、各ウィンドウが最初の画像に基づいて一意のサイズになるようにします。これらの2つのスクリプトを単独で設定すると、正常に機能しますが、一緒に実装しているため、imgのサイズが読み取られていません。もう1つの問題は、スライドショーが画像のリストを処理するため、最初の画像を除くすべてが非表示になっていることです。ただし、このフィルターは他のプロジェクトの他のすべての画像も非表示にしています。

また、開いたポップアップを水平方向の中央に配置し、上から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

どんな助けでも大歓迎です！

score 1 · Accepted Answer

JavaScriptにいくつか問題があるようです。動作するバージョンとソースコードについては、http：//jsbin.com/ahideを参照してください。

初め、

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

このコードは、ポップアップ内のすべての画像を非表示にしてから、A.EffectprojectPopup内にあるコレクションの最初の画像のみを表示します。各ポップアップに最初の画像を表示する必要があるため、次のように個別にループします。

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

jquery - 複数のスライドショーとポップアップをアクティブ化するJquery

1 に答える 1

Related

Reference