?
Solved

Jquery easing image banner

Posted on 2012-08-28
15
Medium Priority
?
454 Views
Last Modified: 2012-09-03
I basically need a banner that contains my images - positioned absolutely and sufficiently long to contain all my images ( they can overflow horizontally one by one).

The view port should be landscaped so that the images animate from top to bottom (one by one) before the next image fades in.

No buttons or extra controls are needed. its just a very simple image slide show with fade in and out. with animation for each portrait image from top to bottom.
Photo-on-2012-08-28-at-10.43-10-.jpg
0
Comment
Question by:zahimezher
  • 8
  • 7
15 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38345620
I made a plugin that does that. it's not complete (first image doesn't pan), but if you want to use it, let me know, and I can probably make whatever adjustments you need.

http://candpgeneration.com/toys/toys-slideshow-with-pan.php
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38346187
That looks great, Its exactly what I need.
Is it possible to make the 1st image pan as well?and is it possible to make the images pan from bottom to top instead of top to bottom?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38346818
sure. give me some time. i'm taking care of some other stuff right now.. but i will post something later.
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 1

Author Comment

by:zahimezher
ID: 38346905
Sure, thanks alot buddy!
The project due date is on the 8th.

Thanks again
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38347385
Here you go:

http://candpgeneration.com/toys/toys-slideshow-with-pan-lgImages.php

Enjoy! let me know if you have any questions.

Also, if you want to have a still image in place of the slideshow should javascript fail, you can add a background image to the slideshow div using css. for example:

.myslideshow{
background-image: url(images/bg-img.jpg); /* this will only be visible if javascript is disabled or until the script kicks in */
background-color: black;
}

Open in new window

0
 
LVL 1

Author Comment

by:zahimezher
ID: 38347402
Not Found

The requested URL /toys/toys-slideshow-with-pan-lgImages.php was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.
Apache Server at m.candpgeneration.com Port 80
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38347448
you're trying to get it from a mobile device. Hold on, I gotta upload it to my mobile site.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38347468
its ok really ill check it later from my pc
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38347470
Ok, try it now.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38348823
That looks amazing. but when i click download plugin nothing happens on all browsers. can you provide me with a link to download all the demo files as zip?

Thanks
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38358324
Hello! So Any link available to download the demo in zip format? Id really appreciate it. Thanks.
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 total points
ID: 38358741
weird. I thought I posted that. Sorry.

You can always view source and download files that way if you need to...

I'm attaching the zip file. Let me know if you get it.

slideshow.zip
0
 
LVL 1

Author Closing Comment

by:zahimezher
ID: 38359929
Thanks allot buddy. Have a great day. Consider posting it on activeden.net for some $$$ :D
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38361074
Cheers.

I made a couple of small fixes and added a zoom feature.

http://candpgeneration.com/toys/slideshow/cnp-slideshow.html

You should download this new version. The download button should be working now too.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38362500
Oh great. thanks a million :)
0

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month14 days, 2 hours left to enroll

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question