Jquery div slideshow hiding child elements

Question

I am trying to follow Jquery code for a div slideshow. Basically, I want to show div1 while hiding div2 (and vice-versa) with all the child elements of the visible div to be visible as well.

The code below only show the first child elements of the visible div and hides all child elements and then show the child elements while hiding the former.

Can someone please help figure out how to show a div and its child elements, while hiding the other sibling divs? Like a slideshow.

Moreover, it would be great to show only those container divs in the slideshow where at least one image element has a src URL set (i.e. not set to null or "").

Thanks dkj

HTML

<div id="slideshow" class="site-content" role="main">
            <div id="div1_wrapper" class="slides">
                <div id="div1_bg">
                    <img src="<?php echo get_option('div1_bg'); ?>" />
                </div>

                <div id="div1_productimg">
                    <img src="<?php echo get_option('div1_productimg'); ?>" />
                </div>
            </div>  

            <div id="div2_wrapper" class="slides">
                <div id="div2_bg">
                    <img src="<?php echo get_option('div2_bg'); ?>" />
                </div>

                <div id="div2_productimg">
                    <img src="<?php echo get_option('div2_productimg'); ?>" />
                </div>
            </div>  
        </div>

JQUERY

<script>
   $(function () {
       $('.slideshow div').hide(); // hide all slides
             $('.slideshow div:first-child').show(); // show first slide
                setInterval(function () {
                   $('.slideshow div:first-child').fadeOut(500)
                        .next('div').fadeIn(1000)
                        .end().appendTo('.slideshow');
                },
        3000); // slide duration
     });    
</script>

Answer 1

After reading your comments to my previous answer, here's another version that should be closer to your requirement:

1. Remove all wrappers without ANY proper image in it (and I also removed those images from valid wrappers that don't have a source given to avoid "missing image" images)
2. Hide all wrappers and show only the first one
3. Cycle all wrappers, hiding/showing the entire wrapper's content

---

New Code

HTML Code (unaltered structure, 2 divs and some src tags with empty content added):

<div id="slideshow" class="site-content" role="main">
    <div id="div1_wrapper" class="slides">
        <div id="div1_bg">
            <img src="<?php echo get_option('div1_bg'); ?>" />
        </div>
        <div id="div1_productimg">
            <img src="<?php echo get_option('div1_productimg'); ?>" />
        </div>
    </div>
    <div id="div2_wrapper" class="slides">
        <div id="div2_bg">
            <img src="" alt="2 empty pics" />
        </div>
        <div id="div2_productimg">
            <img src="" alt="2 empty pics" />
        </div>
    </div>
    <div id="div3_wrapper" class="slides">
        <div id="div3_bg">
            <img src="<?php echo get_option('div3_bg'); ?>" />
        </div>
        <div id="div3_productimg">
            <img src="<?php echo get_option('div3_productimg'); ?>" />
        </div>
    </div>
    <div id="div4_wrapper" class="slides">
        <div id="div4_bg">
            <img src="" alt="1 empty pic" />
        </div>
        <div id="div4_productimg">
            <img src="<?php echo get_option('div4_productimg'); ?>" />
        </div>
    </div>
</div>

JS Code:

$().ready(function() {
   var wrappers= $('.slides');
    for(var i=0;i<wrappers.length;i++) {
        if($(wrappers[i]).find('img[src!=""]').length == 0) {            
            // remove wrappers that do not contain any image with source
            $(wrappers[i]).remove();
        } else {            
            // wrapper should not be removed, but remove all images without any source
            $(wrappers[i]).find('img[src=""]').remove();
        }
    }
    // create the slide show and reload the slides, this time only the ones with proper images
    window.slideShow= {};
    slideShow.slides= $('.slides');
    slideShow.numSlides= slideShow.slides.length;
    slideShow.activeSlide= 0;
    slideShow.slides.hide();
    $(slideShow.slides[0]).show();

    window.setInterval(function() {
        $(slideShow.slides[slideShow.activeSlide]).hide('fadein');
        slideShow.activeSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1;
        $(slideShow.slides[slideShow.activeSlide]).show('fadein');
    }, 3000);
});

And another fiddle to show the changed functionality.

Answer 2

I think this might help you see, i have some different hacks to solve, you have your own.

Have a look, if it helps you.

DEMO

$("#div2_wrapper").fadeOut(0);

$(document).ready(function(){
  
	var divslider = 1;
	function jsslider()
	{    
		if(divslider == 1)
		{
			$("#div1_wrapper").fadeOut(500);
			$("#div2_wrapper").fadeIn(400);
			divslider = 2;
			return;
		}
		if(divslider == 2)
		{
			$("#div2_wrapper").fadeOut(500);
			$("#div1_wrapper").fadeIn(400);
			divslider = 1;
			return;
		}
	}

	var interval = setInterval(jsslider, 3000);
    
});

#div1_wrapper, #div2_wrapper
{
    border:1px solid red;
    position:absolute;
}
 #div2_wrapper
{
    border:3px solid green;
}

/* Borders in CSS are just to see where your div goes. REMOVE IT */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="slideshow" class="site-content" role="main">
            <div id="div1_wrapper" class="slides">
                <div id="div1_bg">
                    <img src="https://www.google.co.in/images/srpr/logo11w.png" />
                </div>

                <div id="div1_productimg">
                    <img src="https://www.google.co.in/images/srpr/logo11w.png" />
                </div>
            </div>  

            <div id="div2_wrapper" class="slides">
                <div id="div2_bg">
                    <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" />
                </div>

                <div id="div2_productimg">
                    <img src="http://www.socialtalent.co/wp-content/uploads/blog-content/so-logo.png" />
                </div>
            </div>  
</div>

Answer 3

I updated the Fiddle to better match your question: first remove all slider elements that contain images with no big or product images; then check if at least one element remains. If at least one element has been found, hide all sliders, show the first, initialise the slide show and start cycling the slides.

JS code:

$().ready(function() {

    // remove all elements without a source ...
    // .... and hide all slide containers
    $('img[src=""]').parent('div').remove();
    $('.slides').hide();

    window.slideShow= {};

    slideShow.slides= $('.slides .slider-image');
    if (slideShow.slides.length > 0) {

        // unhide all slides that contain at least one image
        for (var i=0;i<slideShow.slides.length;i++) {
           $(slideShow.slides[i]).parent('div').parent('div').show();  
        }

        // on initialisation, hide all image slides and show the first element only
        slideShow.slides.hide();

        $(slideShow.slides[0]).show();
        // show the first parent container
        $(slideShow.slides[0]).parent('div').parent('div').show('fadein');

        // initialise the slideshow properties
        slideShow.activeSlide= 0;
        slideShow.numSlides= slideShow.slides.length;        

        // start the show
        window.setInterval(function() {

            slideShow.nextSlide= slideShow.activeSlide+1 == slideShow.numSlides ? 0 : slideShow.activeSlide+1;

            // hide the element shown before
            $(slideShow.slides[slideShow.activeSlide]).hide('fadein');

            // increase the slide counter by 1; start with 0 if end reached
            slideShow.activeSlide= slideShow.nextSlide;
            // show the new image
            $(slideShow.slides[slideShow.activeSlide]).show('fadein');           
        }, 3000);
    }
});

HTML Code:

<div id="slideshow" class="site-content" role="main">
        <div id="div1_wrapper" class="slides" style="border: 3px solid red;">
            <div id="div1_bg">
                <img class="slider-image" src="" alt="This has no source assigned" />
            </div>

            <div id="div1_productimg">
                <img class="slider-image" alt="Product Image" src="<?php echo get_option('div1_productimg'); ?>" />
            </div>
        </div>  

        <div id="div2_wrapper" class="slides" style="border: 3px solid green;">
            <div id="div2_bg">
                <img class="slider-image" alt="Big Image" src="<?php echo get_option('div2_bg'); ?>" />
            </div>

            <div id="div2_productimg">
                <img class="slider-image" alt="Product Image" src="<?php echo get_option('div2_productimg'); ?>" />
            </div>
        </div>  

            <!-- more product slides in the demo below... -->
        </div>

4. updated demo

This will remove all DIVs with empty images, hide all wrappers and unhide those with at least an image with proper source. It will then cycle the images and hide/unhide the current image slide.

Remark: I wouldn't use too many IDs if they are not needed, rather set IDs on elements that require it for identification and using classes for all elements with same function or type (i.e. <div class="div_big"> rather than <div id="div1_bg">)