I made an image gallery, and I used a script to put them in an array, so people can browse through them using previous/next buttons.
I think it may be a very oldfashioned script, but I don't know anything about javascript, and this one seemed simpler than others to modify.
With some help I added a function that shows how many images there are and the number of the image you are seeing (photo 1/6 for example)
The problem is that the script seems to skip counting the first image, it calls the second one 'photo 1/6', doesn't allow you to go back to the first and stops at the fifth. I tried to add a window.onload function, but I think I did it wrong, or it doesnt work because of other scripts that are also loaded on the page (JqueryBeforeAfter).
Could anyone help me to fix this? I would really appreciate it.
Also don't hessitate to tell me what I am doing wrong, I really want to learn!
1. You increment the 'count' variable before you display the picture.
Since you initialize count to 0, when next() is called the first time you increment it to 1
and therefore skip the first image display.
2. You do nothing when you increment or decrement the count value after testing
if count is >= link_array.length or <=0.
Fix for problems #1 and #2 is...
Code:
function next() {
document.location.href = link_array[count];
document.getElementById("thecounter").innerHTML
= "foto " + count + "/" + link_array.length;
count += 1;
if (count >= link_array.length) { count = 0; } // rotates to start of array
}
// skip back
function previous() {
document.location.href = link_array[count];
document.getElementById("thecounter").innerHTML
= "foto " + count + "/" + link_array.length
count -= 1;
if (count < 0) { count = link_array.length-1; } // rotate to end of array list
}
Untested, but logic should work better than original.
Thank you both for your quick reply.
I tried the fix JMRKER gave me, and it did actually help me, but it presented a new problem. The "counter" shows only after the "next" button is clicked, but then you stay at image one and the script calls this one 0/6.
After that it works perfectly (and great how you can skip from the first to the last image immediately and further in a circle), but I would like it to count as humans do, instead of from zero as computers do.
I am going to try the script webdev1958 gave me as well, but since I put all the images in divs (this was necessary because I'm also using the JqueryBeforeAfter plugin, which requires using divs) I'm not sure how to get it working together, but I'll try and get back to you with the results.
Any further tips or advice are still welcome, and I'll post here when I find a solution myself/elsewhere.
The code I posted rotates the images in the array through a single <img> with the next/previous links. Perhaps if you post your html and/or describe why you have the images in divs and what, if anything, you want to happen when an image is clicked more clearly, things might be clearer.
You referred to jquery. You shouldn't need jquery at all for this.
The image gallery is a sequence of before/after images, so by clicking next or previous you skip through sets of images (two at a time). These image-duo's are placed overlapping each other.
I hope this explanation is more clear.
I think I should also mention that this page is loaded in an i-frame, which has the same size as one image div, so you see one image div at a time. It works, but I think it could be done in a better way. But since I'm no superman who can learn scripting overnight, it's better to take it step by step, for now.
It's clearer but I still don't see why you are trying to do it this way
1) You are still using 2 separate functions for the next/previous functions when I showed you can easily do it with just 1 function to swap images in both directions.
2) You have all the images in separate divs but only showing 1 div at a time. So why not cycle all the images through 1 <img> as in the code I posted.
3) Why on earth are you using jquery? If you want to learn javascript, you really should be learning at least the basics of javascript before playing with jquery. In case you are not aware, all jquery is, is a bunch of javascript functions written by someone else to perform certain tasks. There is absolutely nothing you can do with jquery that cannot be done with plain javascript because jquery is javascript. Jquery is not a new or different language to javascript.
My recommendation, since you said
Also don't hessitate to tell me what I am doing wrong, I really want to learn!
, would be to ditch the jquery you have and do this using just plain javascript. For starters, it will run less code than what jQuery will run.
Last edited by webdev1958; 12-19-2011 at 05:36 AM.
Thank you for the advice, but I think I'm explaining it wrong.
I'm using the jquery to show two images at a time. (there is an example on the webpage I linked in my last message)
This worked perfectly, and skipping through the images/divs also worked.
The problem I needed solved was the counting of the images.
Do you think it would be better to start all over again?
I mean by this: first build a new image gallery and after that, try to get it working with the jquery plugin?
I found a great javascript tutorial online and I'll come back to this forum once I finished the whole tutorial.
Thank you very much for your help so far!
Reply With Quote
See if this makes any sense to you ...
Originally Posted by tadum
Bookmarks