Member Avatar for nate22

I'm not good with AJAX but am trying to learn for this project. I've picked apart many galleries, some of which are kind of similar to this idea, but surprisingly I haven't found one that is actually just like this...

[IMG]http://www.22graphics.com/slideshow-concept.jpg[/IMG]
In case above image isn't loading or right side is cut off (as it now appears to me),here's a link to the full image: slideshow-concept.jpg

AJAX Functionality:
• movement
• growth
• layer ordering
• alpha fade in of new thumbnail on right side
• titles/text under center image (not shown in picture)

Instead of using previous and next buttons, you just click the smaller images behind the big center image to advance to the next image or go back to the previous image. When you click the smaller image, it grows and moves to the center while the center image shrinks and moves to the other side. It would be nice if the smaller images faded in rather than simply stacking on top of each other like in this gallery (which is close to what I'm trying to achieve).

It seems like all of this functionality is already out there in other galleries, I just don't know how to put it all together. Any ideas how I could best start this?

Edited by nate22 because: image didn't show up when I viewed the thread (although it did when I previewed it)
  • 2 Contributors
  • 3 Replies
  • 93 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by nate22
Member Avatar for Alxandr

I'dd begin looking into some of the more popular JS frameworks like mootools or jquery for animation and simplification of AJAX.

The things you want to tween is probably opacity, z-index and left and top coordinates. You'll also need to register onclick for the images to the left and the right.

If you're familiar with JS it shouldn't be to much of a problem.

Member Avatar for nate22

I'dd begin looking into some of the more popular JS frameworks like mootools or jquery for animation and simplification of AJAX.

The things you want to tween is probably opacity, z-index and left and top coordinates. You'll also need to register onclick for the images to the left and the right.

If you're familiar with JS it shouldn't be to much of a problem.

Awesome, thanks for helping me narrow down the "register onclick" part. I'm not familiar with javascript at all, but I have been able to do simple things.

Right now I am following a beginners jQuery tutorial on In The Woods, so I think I may actually be able to figure this out (I hope).

Member Avatar for nate22

But any further help or advice is appreciated! :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.