Question

我一直在关注JS灯箱的教程，但我还没有完全理解如何在多个div上使用它。

我想要的是相同的灯箱，但我希望其中的内容根据我按下的按钮/链接而有所不同。

任何帮助将不胜感激。我将在下面发布相关的片段。

HTML：

<ul id="portfolioitems">        
    <li><a href="#1" rel="nofollow" id="1"><img src="images/digitaltattoo.jpg"><div>Digital Tattoo</div></a></li>
    <li><a href="#2" rel="nofollow" id="2"><img src="images/flashgame.jpg"><div>Flash Game - Deserted</div></a></li>
    <li><a href="#3" rel="nofollow" id="3"><img src="images/photos.jpg"><div>Photography</div></a></li>
    <li><a href="#4" rel="nofollow" id="4"><img src="images/bumper.jpg"><div>Video Bumper</div></a></li>
    <li><a href="#5" rel="nofollow" id="5"><img src="images/fbfanaticism.jpg"><div>Facebook Fanaticism</div></a></li>
    <li><a href="#6" rel="nofollow" id="6"><img src="images/oldwebsite.jpg"><div>Business Card Website</div></a></li>
    </ul>

<div id="1">

    <div class="contentwindowwrapper">

        <div class="contentwindow">

            <div class="contentwindowclose">x</div>

            4365786

        </div>

    </div>

</div>

<div id="2">

    <div class="contentwindowwrapper">

        <div class="contentwindow">

            <div class="contentwindowclose">x</div>

            reerrhr

        </div>

    </div>

</div>

JS：

$(document).ready(function(){

            var divnumber = $(this).attr("href");

            $('#1').click(function(){
                $('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
                $('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
                $('#1, .contentwindowwrapper, .contentwindow').css('display', 'block');
                $('.contentwindowwrapper, .contentwindow').css('z-index', '1'); 
            });

            $('#2').click(function(){
                $('.contentwindowwrapper, .contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
                $('.contentwindow').animate({'opacity':'1.00'}, 100, 'linear');
                $('#2, .contentwindowwrapper, .contentwindow').css('display', 'block');
                $('.contentwindowwrapper, .contentwindow').css('z-index', '1'); 
            });

            $('.contentwindowclose').click(function(){
                close_contentwindow();
            });

            $('.contentwindowwrapper').click(function(){
                close_contentwindow();
            });

        });

        function close_contentwindow()
        {
            $('.contentwindowwrapper, .contentwindow').animate({'opacity':'0'}, 100, 'linear', function(){
                $('.contentwindowwrapper, .contentwindow').css('display', 'none');
                $('.contentwindowwrapper, .contentwindow').css('z-index', '-1');
            });
        }

由于

Answer 1

毫无疑问，但嘿，这是一个答案。这个是有效的，但没有任何造型。

一个简单的jQuery灯箱插件：

jQuery.fn.myLightbox = function() {

    return this.each( function() {

        var lightboxContentLink = jQuery( this ).attr( 'href' );
        if( jQuery( lightboxContentLink ).length ) {
            /* get contents from another element with ID lightboxContentLink */
            var lightboxContent = jQuery( lightboxContentLink );
        }
        else {
            /**
             * @todo implement loading from URL
             */
            var lightboxContent = 'some URL content';
        }

        var windowWrapper = jQuery( '<div class="contentwindowwrapper" />' );
        var window = jQuery( '<div class="contentwindow" />' );
        var windowHandle = jQuery( '<div class="contentwindowclose">close</div>' );

        /* close popup on handle click */
        windowHandle.click( function( event ) {
            windowWrapper.hide();
        } );

        /* add content and window handle to popup */
        window.append( lightboxContent, windowHandle );

        /* wrap window with wrapper */
        windowWrapper.append( window );
        windowWrapper.hide();

        /* insert new popup into DOM */
        jQuery( 'body' ).append( windowWrapper );

        jQuery( this ).click( function( event ) {

            /* don't follow link */
            event.preventDefault();

            /* close any popups that are still open */
            jQuery( '.contentwindowwrapper' ).hide();

            /* fade-in popup */
            windowWrapper.show( 300 );

        } );

    } );

};

所需的HTML :(完整）

<ul id="portfolioitems">
    <li><a href="#c1">Open C1</a></li>
    <li><a href="#c2">Open C2</a></li>
    <li><a href="#c3">Open C3</a></li>
</ul>

<div id="c1">This is the content for popup C1.</div>
<div id="c2">This is the content for popup C2.</div>
<div id="c3">This is the content for popup C3.</div>

调用/设置（再次jQuery）：

jQuery( document ).ready( function( $ ) {

    $( '#portfolioitems a[href]' ).myLightbox();

} );

试图让多个灯箱在javascript中工作

1 个答案: