what will make the code running

Question

1.00/5 (1 vote)

See more:

I downloaded the code from internet for understanding how to make slide show...the code contains:

HTML:

XML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('.fadein img:gt(0)').hide();

setInterval(function () {
    $('.fadein :first-child').fadeOut()
                             .next('img')
                             .fadeIn()
                             .end()
                             .appendTo('.fadein');
}, 4000); // 4 seconds
});
</script>

    <link href="try_style.css" rel="stylesheet" />
    <title></title>
</head>
<body>
    <div class="fadein">
    <img src="http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg">
    <img src="http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg">
    <img src="http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg">
    <img src="http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg">
    <img src="http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg">
</div>
</body>
</html>

CSS:

CSS

.fadein {
    position:relative;
    height:320px;
    width:320px;
}

.fadein img {
    position:absolute;
    left:0;
    top:0;
}

But the code didn't work. it just show one image overloaded another. But why??
Please put your answer with details.......

Posted 15-Apr-14 18:28pm

nest101234

Add a Solution

Comments

Sergey Alexandrovich Kryukov 16-Apr-14 1:43am

I would rather not put anything. You are doing counter-productive thing. Why should we look at every piece of code which anyone can pull from Internet? Write your own code, so you could explain what you are trying to do, answer our questions, etc. I don't think you can count on getting help on someone else's code. Besides, there are too many other code samples of the slide show.
—SA

nest101234 16-Apr-14 2:56am

sorry for that..............thank you

3 solutions

Solution 1

Please see my comment to the question. Who would like to dig in the code taken from who-knows-where? If this code does not work for you, look for something else: http://bit.ly/1hTQnbr[^].

—SA

Posted 15-Apr-14 19:47pm

Sergey Alexandrovich Kryukov

Comments

Abhinav S 16-Apr-14 2:00am

5. I have provided OP with some links on alternate controls.

Sergey Alexandrovich Kryukov 16-Apr-14 2:03am

Thank you, Abhinav.
—SA

Solution 2

Here are some good image transition examples -
8 jQuery Image Sliders with Impressive Transition Effects[^]
WOW slider[^]

Posted 15-Apr-14 19:59pm

Abhinav S

Comments

Sergey Alexandrovich Kryukov 16-Apr-14 2:03am

Sure, a 5.
—SA

Abhinav S 16-Apr-14 5:02am

Thank you SA.

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sanket Saxena · Accepted Answer · 2014-04-15T20:00:00

Replace your code with this and change the div class to ID = slideshow But focus on SA comment too.

JavaScript

<script type="text/javascript">
		$(function() {
		
			$("#slideshow > div:gt(0)").hide();
	
			setInterval(function() { 
			  $('#slideshow > div:first')
			    .fadeOut(1000)
			    .next()
			    .fadeIn(1000)
			    .end()
			    .appendTo('#slideshow');
			},  3000);
			
		});

<!-- This script and many more are available free online at -->
<!-- The JavaScript Source!! http://javascript.internet.com -->

<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.

      theImages[0] = 'http://farm9.staticflickr.com/8359/8450229021_9d660578b4_n.jpg'
      theImages[1] = 'http://farm9.staticflickr.com/8510/8452880627_0e673b24d8_n.jpg'
      theImages[2] = 'http://farm9.staticflickr.com/8108/8456552856_a843b7a5e1_n.jpg'
      theImages[3] = 'http://farm9.staticflickr.com/8230/8457936603_f2c8f48691_n.jpg'
      theImages[4] = 'http://farm9.staticflickr.com/8329/8447290659_02c4765928_n.jpg'


// do not edit anything below this line

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
   preBuffer[i] = new Image()
   preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

//  End -->

	</script>

what will make the code running

3 solutions

Solution 1

Solution 2

Solution 3

Add your solution here

Preview 0

Existing Members

...or Join us