tvlooy/image_gallery.html

## image_gallery.html
<html>
    <head>
        <style>
            .images_roll_hide {
                display: none;
            }
        </style>
    </head>
    <body>
        <div id="images_roll" class="catch_page_block">
            <img class="images_roll_show" src="images/frontend/impressie/levende_kreeft_0890.jpg">
            <img class="images_roll_hide" src="images/frontend/impressie/gekookte_gambas_0880.jpg">
            <img class="images_roll_hide" src="images/frontend/impressie/bouillabaisse_0916.jpg">
            <div id="end_images_roll"></div>
        </div>
    </body>
    <script>
        $(document).ready(function() {
            setInterval('images_roll()', 6000);
        });
        function images_roll() {
            var curr;
            var next;
            // Loop over images <img> tags. Show next tag, hide current.
            // If next tag is not <img> (that's what end_images_roll div is for), restart.
            if ($("#images_roll img:visible").next().get(0).tagName == 'IMG') {
                next = $("#images_roll img:visible").next();
                curr = $("#images_roll img:visible:first");
            } else {
                next = $("#images_roll img:first");
                curr = $("#images_roll img:visible");
            }
            curr.fadeOut('slow', function() {
                curr.attr('class', 'images_roll_hide');
                next.fadeIn('slow', function() {
                    next.attr('class', 'images_roll_show')
                });
            });
        }
    </script>
</html>
	<html>
	<head>
	<style>
	.images_roll_hide {
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="images_roll" class="catch_page_block">
	<img class="images_roll_show" src="images/frontend/impressie/levende_kreeft_0890.jpg">
	<img class="images_roll_hide" src="images/frontend/impressie/gekookte_gambas_0880.jpg">
	<img class="images_roll_hide" src="images/frontend/impressie/bouillabaisse_0916.jpg">
	<div id="end_images_roll"></div>
	</div>
	</body>
	<script>
	$(document).ready(function() {
	setInterval('images_roll()', 6000);
	});
	function images_roll() {
	var curr;
	var next;
	// Loop over images <img> tags. Show next tag, hide current.
	// If next tag is not <img> (that's what end_images_roll div is for), restart.
	if ($("#images_roll img:visible").next().get(0).tagName == 'IMG') {
	next = $("#images_roll img:visible").next();
	curr = $("#images_roll img:visible:first");
	} else {
	next = $("#images_roll img:first");
	curr = $("#images_roll img:visible");
	}
	curr.fadeOut('slow', function() {
	curr.attr('class', 'images_roll_hide');
	next.fadeIn('slow', function() {
	next.attr('class', 'images_roll_show')
	});
	});
	}
	</script>
	</html>