I made it for the thumbnails to run left or right depending on the arrow you click on. And the final step would be for the thumbnails not to move left or right if there is no more thumbnails, to the left or to the right, to show. To be honest, I don´t seem to have any further jquery knowledge.
I’ve thought of a couple of things but I don’t really know how to implement them. I’m sure it wouldn’t be too much hassle for someone more experienced. Any help would be greatly appreciated.
You have three variables to consider:[LIST=1]
[]The width of the <div> containing all of the thumbnails $(".thumbs")
[]The width of the <div> containing the visible thumbnails $(".thumbs-container")
[*]The left offset of the <div> containing all of the thumbnails
[/LIST]Now, taking the left arrow as an example, what you want to do when a user clicks on it is check if:
the positive value of the current offset plus two times the width of the <div> containing the visible thumbnails is less than the total width of the <div> containing all of the thumbnails.
I’ve left a couple of console.log() statements in there, so you can get an idea what’s going on.
Once you’ve wrapped your head around that, you’ll want to negate the if statement (so you can get rid of the else part).
And you’ll want to apply the same logic to the other button $("img[title='navegar derecha']")
Hope this helps.
If you have any questions or need any help, just let me know.
I must have been half asleep last night, as I used .offset() in my solution.
Offset gives you the position of the selected element from the left edge of the main window.
What I meant to use was position(), which gives us the current position of an element relative to the offset parent.
Here’s your JavaScript revised:
var numberImages = $(".thumbs").children().length;
var thumbsWidth = numberImages * 121;
var tumbsContainerWidth = $(".thumbs-container").width();
$(".thumbs").css("width", thumbsWidth + "px");
$("img[title='navegar izquierda']").click(function(){
if (($(".thumbs").position().left - tumbsContainerWidth ) >= Math.abs(thumbsWidth) *-1){
$(".thumbs").animate({left:'-=600px'});
}
});
$("img[title='navegar derecha']").click(function(){
if (($(".thumbs").position().left + $(".thumbs-container").width()) <= 0){
$(".thumbs").animate({left:'+=600px'});
}
});
$('.thumbs').on('click', 'img', function(){
$('.show-image').attr('src',$(this).attr('src').replace()).attr('title',$(this).attr('title').replace());
});
Just drop that into your site and it’ll (hopefully) work as expected.
I went through your first answer this morning and it rose a few questions. One of them was related to .offset and you solved it in your second post. I’ve been so busy today I haven’t been able to try either properly. I hope I’ll find the time tomorrow at some point and I’ll be back with a few doubts.
Hi again Pullo, sorry it took me a while to post back, but it’s been an ‘interesting’ week.
To start off, the code in your last post works perfectly. It does exactly what I expected it to do. Thx a million for that.
As for your first post, there was a couple of things that I haven’t used at all so far. I knew .offset from classical javascript but never found myself in the need to use it. I found the contrast in using .offset and .position at JQueyApi. Your first code was working too, though I wasn’t able to ‘apply the same logic’ to the right button. And I’d say it was working because all container boxes were fixed positioned to get them out of the document flow. The initial idea was for the gallery to show up lightbox style. My guess is it would have worked too absolute positioned within a relative positioned parent, since all widths are set to fixed number values. But that´s just a guess.
Anyway, .position() seems the right and safest way to go, since elements are to be animated in relation to other elements in the document and not to the browser window.
console.log I didn’t Knew at all. I just learned a bit about it at and it seems it is used to leave some kind of ‘bread crumbs’ in browser’s web consoles, but I’m not getting the whole of it. Yet.
One more thing. Could you put this in plain english, if you have the time?
if (($(".thumbs").position().left - tumbsContainerWidth ) >= Math.abs(thumbsWidth) *-1)
I’m glad the code did what you wanted. That’s good news.
Erm, what can I say. It was late offset() was actually working on my PC, too, but rather by chance than design.
It was only when I revisited it the next day (intending to implement the same feature in the right scroll) that I realised my mistake.
console.log() is your friend. It has a lot of advantages over (for example) debugging with alert():
alert() is blocking
console typically formats your objects nicely and allows to traverse them
logging statements often have an interactive pointer to code which issued logging statement
you cannot look at more than one alert() message at a time
consoles can have different logging levels with intuitive formatting
Sure:
If the value of the left position of the “.thumbs” container (relative to its offset parent, not to the document) minus the value thumbsContainerWidth , is greater or equal to the minus value (hence *-1) of thumbsWidth, then …
