Click here to Skip to main content
15,172,251 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
I copied from jsfiddle http://jsfiddle.net/samuelmac/EPXuH/[^]
but not working for me.

XML
<body>
    <form id="form1" runat="server">
<ul id="rotator">
    <li class="show">
        <a href="#" title="Title Two">
        <img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some alt text" width="500" height="500" />
        <span class="rotator-caption">Caption One</span>
        </a>
    </li>
    <li class="hide">
        <a href="#" title="Title Two">
        <img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg" alt="some more alt text" width="500" height="500" />
        <span class="rotator-caption">Caption Two</span>
        </a>
    </li>
    <li class="hide">
        <a href="#" title="Title Two">
        <img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg" alt="some more alt text" width="500" height="500" />
        <span class="rotator-caption">Caption Two</span>
        </a>
    </li>
</ul>

    </form>
</body>



CSS
<style>
#rotator {
    height: 580px;
    width: 900px;
    float: left;
    position: relative;
    padding: 0px;
    margin: 0px;
}
#rotator li {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    display: block;
    margin: 0px;
}
#rotator li img {
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: 10;
}
#rotator li span.rotator-caption {
    display: block;
    position: absolute;
    bottom: 40px;
    float: right;
    right: 35px;
    font-size: 3.2em;
    width: auto;
    height: auto;
    z-index: 20;
    padding-left: 40px;
    color:#fff;
    line-height: 1.3em;
}
.show,
.show * {
    display: block !important;
}
.hide,
.hide * {
    display: none !important;
}
</style>



XML
</style>
<script type="text/javascript">
    var config = {
        speed: 4000,
        rotateid:'#rotator'
    };

    $(document).ready(function() {

        $(config.rotateid).each(function() {
            if ($(this).children().length > 1) {
                BeginSlideshow();
            }
        });
    });

    function BeginSlideshow() {
        $(config.rotateid + 'li').css({ opacity: 0.0 });
        $(config.rotateid + 'li:first').css({ opacity: 1.0 });

        if ($(config.rotateid + 'li').length > 0) {
            setInterval('RotateSlides()', config.speed);
        }
    }
    function RotateSlides() {
        var current = ($(config.rotateid + 'li.show') ? $(config.rotateid + 'li.show') : $(config.rotateid + 'li:first'));
        var next = ((current.next().length) ? current.next() : $(config.rotateid + ' li:first'));

        next.css({ opacity: 0.0 })
                    .addClass('show')
                    .animate({ opacity: 1.0 }, 1000)
                    .removeClass('hide');

        current.animate({ opacity: 0.0 }, 1000, function() {
            $(this).addClass('hide');
        }).removeClass('show');
        var index = $('ul' + config.rotateid + 'li.show').index();
    }
</script>

</head>
Posted
Comments
Kornfeld Eliyahu Peter 7-Dec-14 5:31am
   
'Not working' is a poor definition of any problem...Please describe in more details what went wrong...
   
Only the first 'show' image is shown and the other two are not appearing after hiding the previous image. It seems javascript is not getting activated.
Kornfeld Eliyahu Peter 7-Dec-14 5:55am
   
If you think JavaScript doesn't working do these things:
1. Check again the sample you may missed some code
2. Debug JS with your browser to see what actually happening...
   
I checked with the sample. everything is OK.
My browser being chrome I used 'ctrl+shift+i' for debugger.
I find no difference. The first image as it is is only getting displayed.
Kornfeld Eliyahu Peter 7-Dec-14 6:10am
   
Do you have jQuery included in your page?
   
Yes, latestly after submitting the code I also included the Jquery and tried like:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
Kornfeld Eliyahu Peter 7-Dec-14 11:48am
   
That's very interesting...I took the code from jsfiddle and copied into an html page, added jquery and all works like charm...
Kornfeld Eliyahu Peter 7-Dec-14 12:10pm
   
Please check the order of the jQuery line and the script block...
jQuery must come first!
   
the jquery is actually before the script but no effect.

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">

1 solution

Try as following.
It will work. I tried the code at my local, then it was not working.
But now it is working, if we write script within body tag:



<head>
<style>
#rotator {
	height: 580px;
	width: 900px;
	float: left;
	position: relative;
	padding: 0px;
	margin: 0px;
}
#rotator li {
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	width: 100%;
	height: 100%;
	display: block;
	margin: 0px;
}
#rotator li img {
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 10;
}
#rotator li span.rotator-caption {
	display: block;
	position: absolute;
	bottom: 40px;
	float: right;
	right: 35px;
	font-size: 3.2em;
	width: auto;
	height: auto;
	z-index: 20;
	padding-left: 40px;
	color:#fff;
	line-height: 1.3em;
}
.show,
.show * {
	display: block !important;
}
.hide,
.hide * {
	display: none !important;
}
</style>

</head>
<body>
    <form>
<ul id="rotator">
	<li class="show">
        <a href="#" title="Title Two">
		<img src="http://farm3.staticflickr.com/2726/5796023872_9dc05a3b24.jpg">

alt="some alt text" width="500" height="500" />
		Caption One
        </img></a>
	</li>
	<li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg">

alt="some more alt text1" width="500" height="500" />
		Caption Two
        </img></a>
	</li>
    <li class="hide">
        <a href="#" title="Title Two">
		<img src="http://farm7.staticflickr.com/6238/6362150571_5268f71c2f.jpg">

alt="some more alt text" width="500" height="500" />
		Caption Two
        </img></a>
	</li>
</ul>
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
var config = {
	speed: 4000,
	rotateid: '#rotator'
};

$(document).ready(function () {

	$(config.rotateid).each(function () {
		if ($(this).children().length > 1) {
			BeginSlideshow();
		}
	});
});

function BeginSlideshow() {
	$(config.rotateid + ' li').css({ opacity: 0.0 });
	$( config.rotateid + ' li:first').css({ opacity: 1.0 });

	if ($(config.rotateid + ' li').length > 0) {
		setInterval('RotateSlides()', config.speed);
	}
}
function RotateSlides() {
	var current = ($(config.rotateid + ' li.show') ? $(config.rotateid + ' li.show') 

: $(config.rotateid + ' li:first'));
	var next = ((current.next().length) ? current.next() : $(config.rotateid + ' 

li:first'));

	next.css({ opacity: 0.0 })
			        .addClass('show')
			        .animate({ opacity: 1.0 }, 1000)
					.removeClass('hide');

    current.animate({ opacity: 0.0 }, 1000, function () {
        $(this).addClass('hide');
    }).removeClass('show');
	var index = $('ul' + config.rotateid + ' li.show').index();
}
</script>
</body>
   
Comments
Kornfeld Eliyahu Peter 7-Dec-14 11:47am
   
Please try to highlight the changes you introduced the code - it is hard to understand what you fixed...
Ishpreet Kaur 7-Dec-14 11:52am
   
One change is adding the <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

And another change is putting the <script>.. </script> within body tag before closing the body tag.
If we write script within <head> tag, then it not work, but if we place image slider <script> within <body> tag, then it works
Kornfeld Eliyahu Peter 7-Dec-14 12:18pm
   
Not quite true...The script block can be also inside the head element - its content wrapped into $(document).ready...BUT! the include line for jQuery MUST be BEFORE that script block...
   
The jquery include line is well before the script block, like this..but not working

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
   
I tried with your code but the same state is maintained..only the 1st image is static.
   
Hey, it works now. Earlier I didnt notice a line break in the code that I copied from yours. Thanks.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900