Jquery Scripting

[son]

In a JavaScript I had to change image names from integers to strings and cannot get my head around some changes that are necessary in script. When clicking onto thumbs the relevant main image should be displayed and clicking onto previous button should go to image that is stored in array beforehand. The code is (the bold bits are where I changed from i):

function loadThumbs(){for(var i=0; i < imageArray.length; i++) {  thumbPath = '<a id="' + i + '" href="#" onclick="thumbClick(this.id);return false;"><img src="' + imageDir + '/thumb/' + [b]imageArray[i][/b] + '" alt="photo" /></a>';  $('#thumbnails').append(thumbPath);}}function thumbClick(imageID){imageNo = imageID;fadeOutImage();}function prevClick(){if(imageNo > 1){  imageNo--;} else {  imageNo = imageTotal;} fadeOutImage();}

I load the main image via

function loadImage(){$("#imageHolder img").remove();imagePath = '<img src="' + imageDir + '/main/' + [b]imageArray[i][/b] + '" id="image" />';$('#imageHolder').prepend(imagePath);$("#imageHolder img").load(function(){  var imageHeight = "100%";  $("#imageHolder img").css("height", imageHeight );  // fade in div  fadeInImage();});}

What am I missing that needs changing? I tried few things, but nothing worked... Son

[dsonesuk]

By the way bold does not work between forum code tags, Shouldn't the imageArray be imageArray[imageNo] instead in the function loadImage(), but saying that! where is this function called from?

[son]

The whole script is still the same I am working on at present as

<script type="text/javascript">// init vars<?php  if (isset($_GET['cid']))  {  $cid = $_GET['cid'];  }  else  {  $cid = 1;  }?>var imageGallery = "<?php echo $cid;?>";var imageTotal;var imageNo;var aniRunning = false;var slideRunning = true;var imageDir = "gallery";var imageWidth;var slideInterval;$(document).ready(function() {getTotal();});// FUNCTIONS BELOW// get image totalfunction getTotal(){$.get(imageDir + "/thumb/files.php?cid=<?php echo $cid;?>", function(data){  imageArray = data.split("|");  imageArray.pop();  imageTotal = imageArray.length;  imageNo = 1;  loadNavi();  // load thumbnails  loadThumbs();});}function loadNavi(){$('#thumbs-li').prepend('<li><a class="prev-btn" href="#" onclick="prevClick();return false;"></a></li>');$('#thumbs-li').append('<li><a class="thumbs-btn" href="#" onclick="thumbsClick();return false;"></a></li>');$('#thumbs-li').append('<li><a class="next-btn" href="#" onclick="nextClick();return false;"></a></li>');loadImage();}function thumbsClick(){if($("#imageHolder").is(":visible") == true){  // fadeout image  $('#imageHolder').fadeOut('slow', function() {   // fade in thumbs   $('#thumbHolder').fadeIn('slow', function() {    // Animation complete   });  });} else {  // fadeout thumbs  $('#thumbHolder').fadeOut('slow', function() {   // fade in image   $('#imageHolder').fadeIn('slow', function() {    // Animation complete   });  });}}function loadThumbs(){for(var i=0; i < imageArray.length; i++) {  thumbPath = '<a id="' + i + '" href="#" onclick="thumbClick(this.id);return false;"><img src="' + imageDir + '/thumb/' + imageArray[i] + '" alt="Photography" /></a>';  $('#thumbnails').append(thumbPath);}}function thumbClick(imageID){imageNo = imageID;fadeOutImage();}function prevClick(){if(imageNo > 1){  imageNo--;} else {  imageNo = imageTotal;} fadeOutImage();}function nextClick(){if(imageNo < imageTotal){  imageNo++;} else {  imageNo = 1;}fadeOutImage();}// fade out imagefunction fadeOutImage(){// check if image is showingif($("#imageHolder").is(":visible") == true){  // fadeout previous image  $('#imageHolder').fadeOut('slow', function() {   $("#imageHolder img").remove();   loadImage();  });} else {  // fadeout thumbs  $('#thumbHolder').fadeOut('slow', function() {   $("#imageHolder img").remove();   loadImage();  });}}// load imagefunction loadImage(){$("#imageHolder img").remove();imagePath = '<img src="' + imageDir + '/main/' + imageArray[imageNo] + '" id="image" />';$('#imageHolder').prepend(imagePath);$("#imageHolder img").load(function(){  var imageHeight = "100%";  $("#imageHolder img").css("height", imageHeight );  // fade in div  fadeInImage();});}// fade in imagefunction fadeInImage(){$('#imageHolder').fadeIn('slow', function() {  // Animation complete});}function wipeInImage(){var pic = $("#fullImage");imageWidth = $("#fullImage img").width();var imageX = 0 - imageWidth;pic.css("left", imageX );pic.stop().animate({"left": "+=" + imageWidth + "px"},  "medium", function(){  // Animation complete  aniRunning = false;  if(slideRunning == true){   // slideshow   slideInterval = setInterval("slideShow()", 5000);  }});}function prevNext(shID){// pause slideshow    $('.pauseBtn').css("display", "none" );    $('.playBtn').css("display", "inline" );    slideRunning = false;clearInterval(slideInterval);if(shID == "prev") {  if(aniRunning == false){   aniRunning = true;   if(imageNo > 1){    imageNo--;   } else {    imageNo = imageTotal;   }   wipeOutImage();  }} else {  if(aniRunning == false){   aniRunning = true;   if(imageNo < imageTotal){    imageNo++;   } else {    imageNo = 1;   }   wipeOutImage();  }}}// slideshowfunction slideShow(){clearInterval(slideInterval);if(aniRunning == false){  aniRunning = true;  if(imageNo < imageTotal){   imageNo++;  } else {   imageNo = 1;  }   wipeOutImage();}}function playPause(shID) {if(shID == "pause"){  // pause slideshow	 $('.pauseBtn').css("display", "none" );	 $('.playBtn').css("display", "inline" );		 slideRunning = false;	 clearInterval(slideInterval);    } else {	 // play slideshow	 $('.pauseBtn').css("display", "inline" );	 $('.playBtn').css("display", "none" );		 slideRunning = true;	 slideInterval = setInterval("slideShow()", 5000);    }}</script>

I am just useless when it comes down to JavaScript. Have read through all the tutorials on w3schools website, but am still lost... Can you see where I need to adjust? I tried what you said and it made me being able to click onto thumbs to display main image. However, this only worked if category was 1 and the click forward and backward still did not work... Any ideas? Son

[thescientist]

what error checking and logging/alerting are you doing? Are you verifying the correct order of functions as they execute? That values are what they should be at the time they are used in a function? Have you tried just breaking things down to the absolute basics, and building the whole thing up piece by piece? If you have no grasp of JS, starting with an entire script and looking for the problems from the outside looking in will surely be more difficult than starting from the ground up and knowing why each piece of the script is there, and knowing exactly what it's doing.

[son]

I am actually logging as you suggested in previous post, only that I am using

function log() {   if (window.console && window.console.log)   for (var i = 0, l = arguments.length; i < l; i++)	 console.log(arguments[i]);}

It did not log anything for a while and just now I realised that there must have been a cache issue as things finally started logging. This is also the reason why I got a bit desperate. When you try and try and nothing works without the error log showing anything you think you are going crazy or something. Or so at least I do... I keep having issues like this and although I refresh pages and sometimes even delete them and upload again it keeps happening. But this is just to say sorry for coming across like a total idiot who does not try to use the suggestions you give me. Rest assured I use your suggestions in general and do appreciate the help I get:-) Son

[justsomeguy]

It sounds like you need more debugging tools, programming doesn't have to be as opaque and mysterious as you think. You should open Firebug and go to the Script tab, and find the code that you want to debug. If you click to the left of the line numbers you'll see a red circle appear, that's a breakpoint. A breakpoint is a line in your code where execution will pause so that you can look at everything and see what's going on, you can look at all local variables, the execution stack to see which functions have been called, etc, and you can start execution again when you're done (or step through the code one line at a time). Also on the Script tab you'll see three other tabs, for Watch, Stack, and Breakpoints. The Watch tab will list all of the variables that you may want to check. You can also type an expression to watch something other than what is listed. The Stack tab shows the current execution stack, so it shows the series of functions that have been called to get to where you are now. The Breakpoints tab lists all of the breakpoints you've set in the code, where you can enable or disable any of them. Once you set a couple breakpoints in your script and then reload the page, you'll notice that when the code gets to one of your breakpoints then everything will pause and it will show you the breakpoint you're on, and you can use the Watch tab to look at all of the variables and their current values. On the Script tab when the code is paused you'll see several arrow buttons you can click. Those control execution. The Continue button just lets execution continue to the next breakpoint, if any, and the Step Into, Step Over, and Step Out buttons let you follow the execution into a function or jump out of the current function and start debugging again from where the function was called (step out of the function). Anyway, just some more tools to help you figure out exactly what your code is doing.

[dsonesuk]

The main variables to investigate are imageTotal and imageNo, these determine when clicking the prev, next, and thumb which image shows, if it reaches the the total of images change it back to 1, if less than 1 change to total of images. check if image array works by using a actual value imageArray[2] instead of imageArray[imageNo], this will show that its definitely can retrieve the image src from the array, so what value is imageNo using, could use simple alert(imageNo) before it reaches the array.

[son]

Again, many thanks for those great hints. Did print those also now and this will hopefully help me in the future. And am pleased that script does it's job now... This is really great:-) Son