Its much easier than that.
http://www.commadot.com/jquery/easebox/imageRows.php (Updated)
This has all the requirements you mentioned above.
I dont even know how to use stack, push, slice and whatnot.
Try to empty your mind of all the JavaScript you learned.
Then imagine the page from a very CSS point of view. Then slowly build back
up.
I think alot of JS developers think that their MUST be some 'trick'. You
can't just make this work so simply! But jQuery has changed the world. It
really is that simple now. :)
Glen
On 8/28/07, zapatino <[EMAIL PROTECTED]> wrote:
>
>
> no i'm not.
>
> i'm stil trying to do my "history" thing to style the selected
> thumnail in each section.
> As i wrote before i have a working version of this feature on all the
> thumbnails, but i want to specify for each section.
>
> what i want to do is:
>
> -open (slide down) the gallery when an image is selected and apply a
> selected style to the thumbnail.
> -if i select the same image again, the row close (slide up)
> - if i select an other image, the image change without slide. apply
> selected style to new thumbnail and remove it from the previous one
> -you can have more than one row open.
>
> i try to do thing in order, and i can't get around this history
> management, I don't understand how to define an array to stock the
> value of the images viewed for each section like i did for all of
> them.
>
> $(document).ready(function() {
>
> //build list of the thumbnails link
> var pic_link_list = $(".image-gallery li a");
>
> //init history stack
> var stack = [];
>
> //init thumbnails click events
> pic_link_list.click(function(event){
>
> //handle selected pic history
> stack.push(this);
> var newpic = stack[stack.length - 1];
> $(newpic).addClass("selected");
>
> if (stack.length > 1)
> {
> var oldpic = stack[stack.length - 2];
> $(oldpic).removeClass("selected");
> }
>
> //limit history to 2 elems
> if (stack.length > 2)
> {
> stack.shift();
> }
>
> if(oldpic == newpic)
> {
> stack.splice(0, stack.length);
> }
>
> //create pic holder
>
>
> //prevent default link action
> event.preventDefault();
>
> });
>
> });
>
> or there:
>
> http://kosmonot.bl1nd.com/j/jq001.js
> http://kosmonot.bl1nd.com/gal_5.html
>
> cheers
>
> On Aug 28, 3:18 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> > So you are all set?
> > If possible, post your final code to share. :)
> > I usually find that jQuery solutions are much simpler than you imagine
> at
> > first. Glad we could help.
> >
> > Glen
> >
> > On 8/27/07, zapatino <[EMAIL PROTECTED]> wrote:
> >
> >
> >
> > > Ok, now it work in safari as well.
> >
> > > had to close the image tag in your script.
> >
> > > target.empty().append("<img src='" + bigImage + "' /"); (> missing),
> > > don't bother try to find out anymore about this.
> >
> > > thanks again.
> >
> > > On Aug 27, 4:59 pm, "Glen Lipka" <[EMAIL PROTECTED]> wrote:
> > > > Something like
> this?http://www.commadot.com/jquery/easebox/imageRows.php
> >
> > > > You can add in the easing plugin to get fancier effects.
> > > > Maybe even the pause plugin to control the timing super
> specifically.
> >
> > > > Glen
> >
> > > > On 8/27/07, Glen Lipka <[EMAIL PROTECTED]> wrote:
> >
> > > > > Its a little hard to follow exactly what you want, but nothing in
> it
> > > > > sounds problematic.
> >
> > > > > Ok, so to mirror back to you the requirements.
> >
> > > > > 1. Several rows of thumbnails, Each row is a group.
> > > > > 2. Click on a thumbnail and it shows that large image
> underneath,
> > > > > and hides any other image that was open.
> > > > > 3. Two images can be open, but only in different rows (groups).
> >
> > > > > Is this right?
> >
> > > > > Glen
> >
> > > > > On 8/27/07, zapatino <[EMAIL PROTECTED]> wrote:
> >
> > > > > > Hi everybody...
> >
> > > > > > Let me introduce myself, i'm a web designer and i'm learning
> > > > > > javascript to extend my set of skills.
> > > > > > i developed the javascript image gallery on my web site:
> >
> > > > > >http://kosmonot.bl1nd.com
> >
> > > > > > i work on a mac and on mac browser it work almost all right. I
> do
> > > have
> > > > > > an issue when you click to fast on the same button, then
> everything
> > > > > > goes wild.
> >
> > > > > > On pc, well I'm afraid it does not work.
> >
> > > > > > I did all this gallery in plain old javascript, learning fron
> > > > > > different sources, but let me tell you it's hard work.
> >
> > > > > > I then read about jquery and decided to redo everything with it,
> > > even
> > > > > > if i prefer to do it in plain old javascript to learn javascript
> > > > > > first. But i need this thing working and i've been seduced by
> jQuery
> > > > > > and its selector access.
> >
> > > > > > Now it's a different approach and it's a bit confusing for me.
> >
> > > > > > but anyway here comes the point.
> >
> > > > > > I have different series of thumbnails and i want to load and
> expand
> > > > > > the full images, one by one like on my current page.
> > > > > > As well i want to manage the which image is selected, apply a
> class
> > > to
> > > > > > the thumbnail and remove it when deselected.
> >
> > > > > > my first try was fun with the toggleClass() function. but when i
> > > click
> > > > > > on a different image i need to deselect the previous one. I
> tried to
> > > > > > keep the toggleClass() as a base and check if the image selected
> is
> > > > > > different, then toggle the class on the new one and remove it on
> the
> > > > > > previous one.
> >
> > > > > > But i couldn't manage it.
> >
> > > > > > So i decided to use an array to store the value like in this:
> >
> > > > > >http://kosmonot.bl1nd.com/gal_5.html
> >
> > > > > >http://kosmonot.bl1nd.com/j/jq001.js
> >
> > > > > > so far it works but i'm not sure there is not a more jQuery way
> to
> > > do
> > > > > > it.
> >
> > > > > > anyway with the script remember which is the current picture and
> > > which
> > > > > > is the previous one for every thumbnails in the page. However
> what i
> > > > > > want to do is to di the same for each sections and have a local
> > > > > > history for each one of those.
> >
> > > > > > that's where i start to have brain problem.
> >
> > > > > > in my plain old javascript thinking i woudl probably do a
> > > > > > multidimentional array to stock each gallery and the history
> within
> > > > > > each gallery. but when i think about it , create an object and
> let
> > > > > > javascript do the work seems like a better idea, if ever it's
> > > > > > possible.
> >
> > > > > > But Object Oriented javascript is not yet my cup of tea and the
> > > logic
> > > > > > behind jQuery for this kind of work is a bit out of my grasp for
> > > now.
> >
> > > > > > i spent a couple of sleepless nights trying to find out how to
> do
> > > > > > that, but i'm stuck.
> > > > > > and now my javascript look like an empty page as i got mental
> with
> > > it.
> >
> > > > > >http://kosmonot.bl1nd.com/gal_6.html
> > > > > >http://kosmonot.bl1nd.com/j/jq002.js
> >
> > > > > > i would be happy to spend a few more sleepless nights on this
> but at
> > > > > > this moment i don't have a clue.
> > > > > > could somebody enlighten me a bit on what to do, just point me
> in
> > > the
> > > > > > right direction.
> >
> > > > > > like how do you create in the initialisation script something to
> > > > > > remember each galleries and their stack history array or
> whatsoever.
> >
> > > > > > thank you very much People from the world for reading.
>
>
