0

我一直在关注 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');
            });
        }

谢谢

4

1 回答 1

1

No question, but hey here's an answer. This one is working but comes without any styling.

A simple jQuery lightbox plugin:

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

        } );

    } );

};

The required HTML: (complete)

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

The call/setup (jQuery again):

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

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

} );
于 2012-11-23T16:55:21.983 回答