How do I put a link per images in a slideshow

[jovypinoy]

My code below.. I will appreciate all the replies, suggestions and advice.

<script>
var imageUrl = new Array();
var imageTitle = new Array();
var imageCaption = new Array();
<?php
for($counta=0; $counta<$count; $counta++)
{
echo "imageTitle[".$counta."]=\"".$imageTitle[$counta]."\";";
echo "imageUrl[".$counta."]=\"".$imageURI[$counta]."\";";
echo "imageCaption[".$counta."]=\"".$imageCaption[$counta]."\";";
}
?>
jQuery.noConflict();
jQuery(document).ready(function() {
var a=0;
function changepicture() {
jQuery("#slideshowpicture img").attr('src', imageUrl[a]);
jQuery("#slideshowtitle").html(imageTitle[a]);
jQuery("#slideshowarticle").html(imageCaption[a]);
jQuery(".dot"+a).attr('src', "<?php echo $templateuri; ?>/images/home/dotw.jpg");
if( a == 0) {
a++;
jQuery(".dot<?php echo $count-1; ?>").attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
else if( a == <?php echo $count-1; ?>) {
b = a - 1;
a = 0;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
else {
b=a-1;
a++;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
}
changepicture();
var slideinterval = setInterval(changepicture, 4000);
});
</script>

[jovypinoy]

Reply please !!!!!! :(

[TySkby]

Some comments to document your code and a little bit of extra information about your specific question/issue would go a long way. I did read through the code you posted, but it's a bit unclear (to me, at least) as to what you are attempting to do (which is why I suggest adding some comments to your code to help make it more understandable to an outside reader).

I'd love to help with this, but some clarification would definitely be useful. I can obviously only speak for myself, but I think that would help generate a better response from the members here- I know it would for me :)

[jovypinoy]

Hi, thanks for your reply.. Ok.

I want to add a links on each images from my slideshow. Sorry I'm not good on this so please bear with me.

JAVASCRIPT
-----------------------------------------------
<script>
var imageUrl = new Array();
var imageTitle = new Array();
var imageCaption = new Array();

<?php
for($counta=0; $counta<$count; $counta++)
{
echo "imageTitle[".$counta."]=\"".$imageTitle[$counta]."\";";
echo "imageUrl[".$counta."]=\"".$imageURI[$counta]."\";";
echo "imageCaption[".$counta."]=\"".$imageCaption[$counta]."\";";
}

?>

jQuery.noConflict();

jQuery(document).ready(function() {

var a=0;

function changepicture() {
jQuery("#slideshowpicture img").attr('src', imageUrl[a]);
jQuery("#slideshowtitle").html(imageTitle[a]);
jQuery("#slideshowarticle").html(imageCaption[a]);
jQuery(".dot"+a).attr('src', "<?php echo $templateuri; ?>/images/home/dotw.jpg");

if( a == 0) {
a++;
jQuery(".dot<?php echo $count-1; ?>").attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");

}
else if( a == <?php echo $count-1; ?>) {
b = a - 1;
a = 0;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
else {
b=a-1;
a++;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
}
changepicture();
var slideinterval = setInterval(changepicture, 4000);
});
</script>

HTML
----------------------------------

<img src="<?php echo get_template_directory_uri(); ?>/images/home/slideshow.jpg">

[TySkby]

No apology necessary! We're all here to help and be helped :)

To elaborate, when I suggested adding comments to your code, I was thinking something a bit more in-line that would elaborate what your code is doing step-by-step. You can use // to comment and document a single line of code in PHP and JavaScript.

Here's an example:

<script>
//Arrays for Image URLs, titles, and captions
var imageUrl = new Array(); 
var imageTitle = new Array();
var imageCaption = new Array();

<?php
//Explain what the $counta and $count variables are, and what this loop does here
for($counta=0; $counta<$count; $counta++)
{
echo "imageTitle[".$counta."]=\"".$imageTitle[$counta]."\";";
echo "imageUrl[".$counta."]=\"".$imageURI[$counta]."\";";
echo "imageCaption[".$counta."]=\"".$imageCaption[$counta]."\";";
}

?>

//Here you can tell readers why you are using jQuery.noConflict()
jQuery.noConflict();

jQuery(document).ready(function() {

//Tell us what var a is and what it will be used to do
var a=0;

//Give some details on this function here
function changepicture() {
jQuery("#slideshowpicture img").attr('src', imageUrl[a]);
jQuery("#slideshowtitle").html(imageTitle[a]);
jQuery("#slideshowarticle").html(imageCaption[a]);
jQuery(".dot"+a).attr('src', "<?php echo $templateuri; ?>/images/home/dotw.jpg");

//What are you checking for here?
if( a == 0) {
a++;
jQuery(".dot<?php echo $count-1; ?>").attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");

}
//What is the alternative?
else if( a == <?php echo $count-1; ?>) {
b = a - 1;
a = 0;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
else {
b=a-1;
a++;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
}
changepicture();
var slideinterval = setInterval(changepicture, 4000);
});
</script>

Those are just some places where I personally could use some clarification. Commenting is really good practice for allowing others to understand what your code is doing and what variables and functions are being used for. They also come in handy when you come back to some old code you wrote long ago and can't quite remember the nuts and bolts of each step of your code.

Good practice for figuring out where comments are needed can be done by reading through your code and asking yourself these questions:
-Is it clear what this variable is for and why it is being used?
-How can I explain what I am doing in this function?
-Why am I using a loop here?
-Does anything else seem obscure or difficult to understand, especially to someone else?

[jovypinoy]

<script>
//Arrays for Image URLs, titles, and captions
var imageUrl = new Array();
var imageTitle = new Array();
var imageCaption = new Array();

<?php
//This is to loop the imageTitle, imageUrl and imageCaption in the slideshow. The value corresponds to the java script below.
for($counta=0; $counta<$count; $counta++)
{
echo "imageTitle[".$counta."]=\"".$imageTitle[$counta]."\";";
echo "imageUrl[".$counta."]=\"".$imageURI[$counta]."\";";
echo "imageCaption[".$counta."]=\"".$imageCaption[$counta]."\";";
}

?>

//Here you can tell readers why you are using jQuery.noConflict()
jQuery.noConflict();

jQuery(document).ready(function() {

//This is to call the image according to their value in the gallery. In this case the first saved picture in the media will be the first on to call and it is equal to [0].
var a=0;

//The picture will change according to the set interval value. As you can see the variable a was used on each image variables.
function changepicture() {
jQuery("#slideshowpicture img").attr('src', imageUrl[a]);
jQuery("#slideshowtitle").html(imageTitle[a]);
jQuery("#slideshowarticle").html(imageCaption[a]);
jQuery(".dot"+a).attr('src', "<?php echo $templateuri; ?>/images/home/dotw.jpg");

//This is also to sync the dots made to the picture on a slideshow. The number of dots corresponds to the number of pictures in a slideshow. For example the 2nd dot will became blue if the 2nd picture was show otherwise it will be white.

if( a == 0) {
a++;
jQuery(".dot<?php echo $count-1; ?>").attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");

}
//This is to reset the value of a to 0. To avoid infinite looping
else if( a == <?php echo $count-1; ?>) {
b = a - 1;
a = 0;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
else {
b=a-1;
a++;
jQuery(".dot"+b).attr('src', "<?php echo $templateuri; ?>/images/home/dotb.jpg");
}
}
changepicture();
var slideinterval = setInterval(changepicture, 4000);
});
</script>

[jovypinoy]

Yeah I solved my own problem. I luckily searched at this site http://www.webmasterworld.com/javascript/3754876.htm

And also works perfectly to me.. I am so happy.. :D