passing var to image switch

[arfa]

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?

<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

[DanInMa]

<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>

[arfa]

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];

[xelawho]

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:

<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...

[DanInMa]

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?

<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

[arfa]

@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.

[xelawho]

in that case it's simple - just replace the tn_ and use that for the src...

$('.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);
        }); 
    });

[arfa]

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.

[arfa]

This is doing what I had in mind..

<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>