We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

Javascript slideshow with images sliding in from the left

John Carney
John Carney asked
on
Medium Priority
405 Views
Last Modified: 2012-06-27
I'm trying to create a slide show in which the new image slides in from the left to cover the current image.  Or the current image slides off to the right revealing the new image underneath it.

The way it is now, when you choose animation type 'slide' or 'slidefade', the images come from and return to the upper left corner, zooming in and out at the same time. What is causing that in the javascript, and how do I modify the script so that they just slide in and out as I described above?

Thanks,

John

This is a followup to: http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_24084781.html
Comment
Watch Question

Commented:
Perhaps something like
http://malsup.com/jquery/cycle/
or
http://sorgalla.com/projects/jcarousel/
might better fit your needs?

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
John CarneyReliability Business Tools Analyst II

Author

Commented:
Very helpful links, sh0e, thanks. These are very cool, much cooler than what I was trying to do.

Still I would love to know how to modify the script you gave me to work different ways. For eaxmple I tried fooling around with this bit of code and nothing I do changes the way it works.

else if (settings.animationtype=='slideright'){
            $(elements[last]).animate({width:'hide'},settings.speed);
           $(elements[current]).animate({width:'show'},settings.speed);

I even commented out the active lines and it still worked the same way. ???

else if (settings.animationtype=='slideright'){
           // $(elements[last]).animate({width:'hide'},settings.speed);
           //$(elements[current]).animate({width:'show'},settings.speed);

So how would I code it so that the current image stays exactly where it is and the new image slides in from the left right over it?

Obviously the ready made stuff is way better than I could come with, but I just want to get a better grasp of the language of javascript, and no what words produce what results.

If you can get me to learn that much here, I promise I'll stop bothering you for a while :-)

Here's my latest: http://www.discretedata.com/JCRD/WREM/SlideFade_v3.html

Thanks,

John
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.