[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Jquery image banner

Posted on 2012-08-27
14
Medium Priority
?
748 Views
Last Modified: 2012-08-28
I'm looking for a jquery image banner, a very simple one that rotates many images, with no buttons or options at all. But i need it to slide the portrait image from top to bottom so that the whole image is viewed and then move on to the other image. Any links????
0
Comment
Question by:zahimezher
  • 8
  • 5
14 Comments
 
LVL 27

Expert Comment

by:lenamtl
ID: 38336907
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38336950
Thats not what I meant, what i need is a banner that flips images and slides every single image vertically. so the banner is landscape and teh images are portrait but still the viewer gets to see all the image before the next one starts....
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38337460
Do you mean like this

http://jquery.malsup.com/cycle/begin.html

(Scroll down to the working demo - I believe the one one the right is what you are looking for)
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 1

Author Comment

by:zahimezher
ID: 38337487
no more like this

http://manos.malihu.gr/tuts/jquery_image_panning.html

but i want the easing to happen by itself from top of the image to the bottom.
and when it reaches the bottom it fades to a different image.

Ive seen tons in flash but cant find a html based one :S
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38338137
one that rotates many images, with no buttons or options at all. But i need it to slide the portrait image from top to bottom

Based on your original post Jcycle does what you want.

Your second post does not makes sense - the images don't slide or move unless you mouse over them - no resemblance to your original request at all.

Please explain how Jcycle differs from what you actually want?
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38339691
No cycle doesn't do what I want. Cycle is a bunch of images easing at the same time.
What I want is one image easing from top to bottom across the banner area. and when the end of the 1st image is reached, the next image fades in starting at the top, and eases all the way to the bottom and so on...

Sorry for confusing you with the mouse over. Thats not what i want at all. i just though that the easing will help you understand better the motion I wanted.

So to make things clearer one last time... I want the easing that happens on mouse over but with out having to mouse over ... and many images easing right after each other not like in the cycle... 1 image at a time....
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38339780
Ok so if I undersand you correctly what you want is this

I am imagining a window that an image is passing - but when the left edge of the image reaches the left edge of the window it continues left panning across the image i.e. the image is bigger than the view port. When the right edge of the image reaches the right edge of the window the image stops fades out and a new image fades in and starts panning.

Is that correct - sorry but I am finding it very difficult to envisage what you want - maybe if you could explain the application of what you want to achieve it might help.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38339841
thats exactly what i want. but i want the images to pan from top to bottom instead of right to left :) ill attach a sketch in a few mins
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38339852
sketch
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 38339917
I doubt you are going to find an existing plugin to do that but it shouldn't be too difficult to do this. You basically have a div that contains your images - positioned absolutely and sufficiently long to contain all your images (or at least long enough to contain 3 - they can overflow horizontally if needed).

You put this inside a view port with position relative and fixed height and width - with overflow hidden - this is your view port.

Next use jQuery animate to animate the inner panel down to bottom - number of pixels the viewport exceeds the image in height. In the complete function you do the following
1. Fade the first image out
2. Fade the next image in - in the completion function you
move the image that has just finished to the end of the queue so that the process can cycle
Then start the animatation again by setting a timeout to call the animation function so you don't end up recursing to infinity.

I can knock something together a bit later if no other posts come in.
0
 
LVL 1

Author Closing Comment

by:zahimezher
ID: 38339924
Brilliant :)
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38339929
I don't really know how to do this. but ill be posting a new question with what you described to get some ... "Jquery easing banner"
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 38339943
Thanks for the points - post back here if you don't come right - I am tied up most of today but this looks interesting and if you have no good answers by this afternoon (GMT+2) then I will take a look.
0
 
LVL 1

Author Comment

by:zahimezher
ID: 38339952
Cool, thank you for you patients.
Points well earned, and I got my answer "no easy solution for this !"
Thats why I posted a new question "Jquery easing image banner" for more points.

Thanks again
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Browsers only know CSS so your awesome SASS code needs to be translated into normal CSS. Here I'll try to explain what you should aim for in order to take full advantage of SASS.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

834 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