Need help with some java script.

[robin9000]

I really don't know how to code so please forgive me. One of my pages are the following:

http://robinsden.co.cc/services/photography/nature.php

As you will see it's a basic slide show. I would like to know if there is a way to add some code to the java script to make it so that I can have a slide effect or a fade effect. I would love to have a slide effect but a fade effect would work fine too.

Thanks to anyone who can help me out.

[bluewalrus]

Could try this http://www.malsup.com/jquery/cycle/

[robin9000]

Could try this http://www.malsup.com/jquery/cycle/

I just tried adding $('#s1').cycle('fade'); to my java script as the page you sent me to said to do and it dose not seem to work, can you take a look at my java script and tell me what I did wrong.
Thanks.

[jscheuer1]

You need a copy of:

http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js

linked to your page.

[robin9000]

I have added the java script to the page by attaching it as an external java script so I now have that one.

The java script I am dealing with is:

What I have made blue is the code I am unsure of how to write in order to make it work with my page. Thanks for any help in being able to make it work for me.

<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[

first = 1;
last = 4;
current = 1;

function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';

// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
$('slide').cycle('fade');
}

function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';

if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
$('slide').cycle('fade');
}
//]]>
// -->
</script>

[jscheuer1]

The cycle script must come after the:

ajax/libs/jquery/1.3.2/jquery.min.js

script. And you should probably host your own cycle script. I don't believe the author meant for you to hotlink to it. For testing though, I suppose it's fine.

[robin9000]

I now have the script comming after the script

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

However I must still not have somthing right?

[jscheuer1]

That's good, now all you have to do is follow one of the examples. For instance, you could replace:


<script language="JavaScript" type="text/javascript">
//<!--
//<![CDATA[

first = 1;
last = 4;
current = 1;

function nextPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';

// Show next picture, if last, loop back to front
if (current == last) { current = 1; }
else { current++ }
object = document.getElementById('slide' + current);
object.style.display = 'block';
$('slide').cycle('fade');
}

function previousPicture() {
// Hide current picture
object = document.getElementById('slide' + current);
object.style.display = 'none';

if (current == first) { current = last; }
else { current--; }
object = document.getElementById('slide' + current);
object.style.display = 'block';
$('slide').cycle('fade');
}
//]]>
// -->
</script>

with:


<script type="text/javascript">
//<!--
//<![CDATA[

$('.slideShow').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
next: '#next2',
prev: '#prev2'
});

//]]>
// -->
</script>

and replace:


<div class="slideShow">
<div class="setTitle">Nature</div>

<div id="slide1" class="slides">
<div class="slideTitle">Farmers Sunrise 1/4</div>

<img src="../../Images/services/photography/nature/outdoors9.jpg" height="400" width="520" border="0" alt="" /> </div>
<div id="slide2" class="slides">
<div class="slideTitle">Heaven shining through 2/4</div>
<img src="../../Images/services/photography/nature/outdoors3.jpg" height="400" width="520" border="0" alt="" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle"> 3/4</div>

<img src="../../Images/services/photography/nature/dual flowers.JPG" height="400" width="520" border="0" alt="" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle"> 4/4</div>
<img src="../../Images/services/photography/nature/flower3.jpg" height="400" width="520" border="0" alt="" />
</div>
<div class="controls">
<a href="javascript:previousPicture()" style="margin: 10px;">« Previous</a>

<a href="javascript:nextPicture()" style="margin: 10px;">Next »</a>
</div>
</div>


with:


<div class="setTitle">Nature</div>
<div class="slideShow">

<div id="slide1" class="slides">
<div class="slideTitle">Farmers Sunrise 1/4</div>

<img src="../../Images/services/photography/nature/outdoors9.jpg" height="400" width="520" border="0" alt="" /> </div>
<div id="slide2" class="slides">
<div class="slideTitle">Heaven shining through 2/4</div>
<img src="../../Images/services/photography/nature/outdoors3.jpg" height="400" width="520" border="0" alt="" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle"> 3/4</div>

<img src="../../Images/services/photography/nature/dual flowers.JPG" height="400" width="520" border="0" alt="" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle"> 4/4</div>
<img src="../../Images/services/photography/nature/flower3.jpg" height="400" width="520" border="0" alt="" />
</div>
</div>
<div class="controls">
<a href="javascript:previousPicture()" id="prev2" style="margin: 10px;">« Previous</a>

<a href="javascript:nextPicture()" id="next2" style="margin: 10px;">Next »</a>
</div>

The layout will be off, but I think you will get the idea from there. If not, let me know.

[robin9000]

I'm not sure how to get the next and previous buttons to center on my page. but the most important thing is I don't seem to be able to get the page to reconize that the images are supose to be part of the page. It's like they are floating on top of the page.

[jscheuer1]

At least you have it working. I played around with this a bit more and came up with this markup using inline styles, which of course could be transferred to a stylesheet and probably should be. It seems to pretty much take care of everything:


<div class="setTitle" style="text-align:center;">Nature</div>
<div class="slideShow" style="height:425px;width:520px;margin:auto;">

<div id="slide1" class="slides">
<div class="slideTitle">Farmers Sunrise 1/4</div>

<img src="../../Images/services/photography/nature/outdoors9.jpg" height="400" width="520" border="0" alt="" /> </div>
<div id="slide2" class="slides">
<div class="slideTitle">Heaven shining through 2/4</div>
<img src="../../Images/services/photography/nature/outdoors3.jpg" height="400" width="520" border="0" alt="" />
</div>
<div id="slide3" class="slides">
<div class="slideTitle"> 3/4</div>

<img src="../../Images/services/photography/nature/dual flowers.JPG" height="400" width="520" border="0" alt="" />
</div>
<div id="slide4" class="slides">
<div class="slideTitle"> 4/4</div>
<img src="../../Images/services/photography/nature/flower3.jpg" height="400" width="520" border="0" alt="" />
</div>
</div>
<div style="text-align:center;">
<a href="javascript:previousPicture()" id="prev2" style="margin: 10px;">« Previous</a>

<a href="javascript:nextPicture()" id="next2" style="margin: 10px;">Next »</a>
</div>