SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Jquery images Gallery carrousel

    Hi there,

    I'm stucked creating a jquery image gallery. Here is what I got so far:

    http://www.ovumbar.com/galeria-test.php

    and here the jquery wrote for that purpose:

    Code JavaScript:
     /* images gallery carrousel
    		----------------------------------------*/
    		var numberImages = $(".thumbs").children().length;
    		var thumbsWidth = numberImages * 121;
    		$(".thumbs").css("width", thumbsWidth + "px");
     
    		$("img[title='navegar izquierda']").click(function(){$(".thumbs").animate({left:'-=600px'});});
    		$("img[title='navegar derecha']").click(function(){$(".thumbs").animate({left:'+=600px'});});	
     
    		$('.thumbs').on('click', 'img', function(){
    			$('.show-image').attr('src',$(this).attr('src').replace()).attr('title',$(this).attr('title').replace());			
    			});

    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.

    Thanks in advance and best regards,

    Whitecreek.

  2. #2
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there,

    This isn't too had to implement.

    You have three variables to consider:
    1. The width of the <div> containing all of the thumbnails $(".thumbs")
    2. The width of the <div> containing the visible thumbnails $(".thumbs-container")
    3. The left offset of the <div> containing all of the thumbnails
    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.

    If it is then you're good to scroll.

    So in your code, change this:

    Code JavaScript:
    $("img[title='navegar izquierda']").click(function(){$(".thumbs").animate({left:'-=600px'});});
    for this:

    Code JavaScript:
    $("img[title='navegar izquierda']").click(function(){  
      var offset = $(".thumbs").offset()
      console.log($(".thumbs").width());
      console.log($(".thumbs-container").width());
      console.log(offset.left);
     
      if (Math.abs(offset.left) + 2*($(".thumbs-container").width()) > $(".thumbs").width()){
        console.log("No way, buddy");
      } else {
        $(".thumbs").animate({left:'-=600px'});
      }
    });
    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.

  3. #3
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi again,

    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:

    Code JavaScript:
    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.

  4. #4
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Pullo,

    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.

    Just came to thank you for your answer.

    Regards.

  5. #5
    SitePoint Enthusiast whitecreek's Avatar
    Join Date
    Aug 2011
    Location
    Madrid, Spain
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

    Code JavaScript:
    if (($(".thumbs").position().left - tumbsContainerWidth ) >= Math.abs(thumbsWidth) *-1)

    Again, thx for your help mate.

    Regards,

    Whitecreek.

  6. #6
    Grüße aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,352
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi there whitecreek,

    I'm glad the code did what you wanted. That's good news.

    Quote Originally Posted by whitecreek View Post
    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.
    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.

    Quote Originally Posted by whitecreek View Post
    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.
    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

    See also here: http://stackoverflow.com/questions/8...ter-than-alert

    Quote Originally Posted by whitecreek View Post
    One more thing. Could you put this in plain english, if you have the time?

    Code JavaScript:
    if (($(".thumbs").position().left - thumbsContainerWidth ) >= Math.abs(thumbsWidth) *-1)
    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 ...

    Hope that helps.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •