Question

I have 2 divs that need to show hide. One with images, one with youtube video.

<div class="gallery-video-wrapper">
     <iframe id="player" type="text/html" width="430" height="323" src="http://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1" frameborder="0"></iframe>
</div>
<div class="gallery-images">
    <img src="image1.jpg" />
rest of the jquery gallery code...
</div>

By default only the video is shown. On click on

<a href="#" class="show-gallery">Show Images</a>

I want to show the gallery which i managed to do. But if the video is played i cant seem to stop it unless i remove the whole div. and if do that i don’t know how to put it back.

This is the script i have so far:

$('.show-gallery').click(stop, function() {

        $('.gallery-video-wrapper').fadeOut();
        $('.gallery-images').fadeIn(function() {
            $('.ad-gallery').adGallery({
                display_back_and_forward : true,
                display_next_and_prev : true,
                update_window_hash : false,
                scroll_jump : 0,
                thumb_opacity : 1
            });
        });
    });

Any ideas how to solve this?

Answer 1

But if the video is played i cant seem to stop it unless i remove the
whole div. and if do that i don’t know how to put it back.

have you tried using .detach() instead of .remove()?

The .detach() method is the same as .remove(), except that .detach()
keeps all jQuery data associated with the removed elements. This
method is useful when removed elements are to be reinserted into the
DOM at a later time.

you can also try to .hide() the div, and .show() it later