Click to See Complete Forum and Search --> : target to div????
woodhalld
05-23-2009, 11:37 PM
hey I'm working on a gallery, and I want the thumbnail which is in a div to appear in another div
I know it's doable, I'd just like to have a helping hand
thanks
WoodhallD
Hen Asraf
05-24-2009, 01:50 AM
Just put a div inside a div? I'm not sure what you need
znebula
05-24-2009, 06:46 AM
If you're working a gallery... Set up two divs(elements)... One for you big images and one for your thumbnails.
Position you large images position:absolute within the "large image" div at the same 0,0 positions on top of one another. Hide all (CSS) but the one you'd like to display first. Make a class for "hide" and "show" and apply hide to all other images.
Now, set up all your thumbnails in the EXACT order of their corresponding "large images"... Set the action on these elements to a "click function" and use Jquery's "index" function (http://visualjquery.com) to change the classes (.addClass/.removeClass) on the "large images" that are equivalent to the thumbnail images.
I may not have explained this in the easiest manner, but I'll give you a code example... This for a "hover" change but should give you the idea...
CSS --
h3.reg { background-color:#c9ab8f; }
h3.overh3 { background-color:#b3987f; }
JS --
function ltNavHov(){
$('.ltNavHold h3').hover(function(){
$(this).removeClass('reg').addClass('overh3');
},function(){
$(this).removeClass('overh3').addClass('reg');
});
}
$(function() {
ltNavHov();
});
znebula
05-24-2009, 06:49 AM
Here's an example of the index function I was referring to...
function gr_add_tabs(){
var tabs = $('ul#tabs li');
tabs.find('a').hover(function(){
$(this).parent().addClass('hover');
},function(){
$(this).parent().removeClass('hover');
});
tabs.click(function(){
var index = $('#tabs li').index(this);
tabs.removeClass('active');
$(this).addClass('active');
$('#addItems').find('.tabContent').hide()
$('#addItems').find('.tabContent:eq('+index+')').show();
return false;
});
}