Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts

    passing var to image switch

    I am modifying an existing PHP image gallery to add dynamic UI.

    I have a nice (jquery) thumbnail slider which builds dynamically and I can add (some kind of) javascript call to each thumbnail - perhaps onclick= to set up the variable for the main image to be displayed below.

    This is the bit I get lost - how to pass that variable to this bit of jquery which displays the main image?
    Code:
    <script>
    $(function() {
    var images = ["chococat.gif","comic.gif","devil.gif","eye.gif"];
    $('<img>').attr({'src':''+images[1],'id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.change').click(function(e) {
        e.preventDefault();
        var image = images[Math.floor(Math.random()*images.length)];
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800);
            });
        });
    });
    </script>
    var images can also be build dynamically but...
    Instead of the random array load I want the corresponding image loaded onclick

    I have looked at many gallery scripts and they all seem to load ALL images - thumbs and main. This is quite a load considering that many users will only view 5-10 images per album of maybe 100 images.

    I hope this is clear enough.
    thanks

  • #2
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    Code:
    <script>
    $(function() {
    var images = ["chococat.gif","comic.gif","devil.gif","eye.gif"];
    $('<img>').attr({'src':''+images[1],'id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.change').click(function(e) {
        e.preventDefault();
        var image = images[Math.floor(Math.random()*images.length)];
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', image); 
                  $(this).fadeIn(800);
            });
        });
    });
    </script>

  • #3
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    I don't see any change in the code apart from dropping the 'path' quote marks. I leave this out for clarity.

    I have an array of elements - thumbnails - which I figure to set an ID value - 0 to say 100
    I think to set the equivalent array - var images = [0, 1,...,100]

    How to get the thumbnail ID inserted into var image = images[ID];

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    although it is loosening, there is a historical requirement against having IDs that start with numbers. you could set another attribute, however, lets say ind, so your thumbnails would have ind="0", ind="1" in their img tag, according to which larger image they related to.

    then, say your thumbs had a class of "thumbs", I think your function would look like this:

    Code:
    <script>
    $(function() {
    var images = ["chococat.gif","comic.gif","devil.gif","eye.gif"];
    $('<img>').attr({'src':''+images[1],'id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.thumbs').click(function(e) {
        e.preventDefault();
        var image = images[$(this).attr('ind')];
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800);
            });
        });
    });
    </script>
    untested, but it will probably work. It would probably make more sense to have the filenames of the thumbs and larger pics related (like chococatsmall.gif and chococatbig.gif, comicsmall.gif and comicbig.gif) so that you could do the swicth independent of array position, but that's up to you...

  • #5
    Senior Coder DanInMa's Avatar
    Join Date
    Nov 2010
    Location
    Salem,Ma
    Posts
    1,577
    Thanks
    13
    Thanked 248 Times in 248 Posts
    ok well you cannot start and id with a number. your image alreayd has an id of bg, you want to change the id of bg?

    Code:
    <script>
    $(function() {
    var images = ["chococat.gif","comic.gif","devil.gif","eye.gif"];
    $('<img>').attr({'src':''+images[1],'id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.change').click(function(e) {
        e.preventDefault();
        var ranImgNum = Math.floor(Math.random()*images.length)
        var image = images[ranImg];
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr({'src':image, 'id':'ranimageid'+ranImgNum}); 
                  $(this).fadeIn(800);
            });
        });
    });
    </script>
    if you want to change the id of bg, this will do it

  • #6
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    @xelawho
    Yes, thumbs are currently tn_NAME.jpg - against NAME.jpg
    Would it be a case of setting ID=NAME.jpg
    and then setting:
    var image = images[$(this).attr('ID')];
    edit:.... thinking - could this just be: var image = $(this).attr('ID');

    I will try this.

    @DanInMa - I will also try using the bg tag

    PS - the js I have is from a background changer I found. Can it be simplified?

    I think I am almost there. Thank you.

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,768
    Thanks
    55
    Thanked 518 Times in 515 Posts
    in that case it's simple - just replace the tn_ and use that for the src...

    Code:
    $('.thumbs').click(function(e) {
        e.preventDefault();
        var image = $(this).attr('src').replace("tn_","")
           $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src',image); 
                  $(this).fadeIn(800);
            }); 
        });

  • #8
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    No time to test just now but a quick scan reads logically to me.

    The thought occurs - I am not replacing the thumbnail with the main image but loading the main image below the strip of thumbs.

    I need to test this.

    thanks for the quick reply.

  • #9
    New Coder
    Join Date
    Sep 2006
    Posts
    72
    Thanks
    3
    Thanked 0 Times in 0 Posts
    This is doing what I had in mind..

    Code:
    <style>
    #bg-wrapper {display:none;margin-left:99px;cursor:pointer}
    .change {cursor:pointer}
    </style>
    <script src="jquery.min.js"></script>
    <script>
    $(function() {
    $('<img>').attr({'src':'chococat.gif','id':'bg','title':''}).appendTo('#bg-wrapper').parent().fadeIn(1000);
        $('.change').click(function(e) { 
        e.preventDefault(); 
        var image = $(this).attr("id").replace("tn_","");
            $('#bg').parent().fadeOut(800, function() {
                $('#bg').attr('src', ''+image); 
                  $(this).fadeIn(800); }); }); });
    </script>
      </head>
      <body>    
          <span class="change" id="tn_chococat.gif">Cat</span> <span class="change" id="tn_comic.gif">Comic</span> <span class="change" id=tn_devil.gif>devil</span>
    	  <BR><BR>
        <div id="bg-wrapper"></div>


  •  

    Posting Permissions

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