[jQuery] Cycle plugin pager over image
Hello everyone! After using the Cycle plugin for quite some time now i was wondering if there is any way to get the "auto-generated pager" shown over my image. I can only see the .before and .after tags which put the pager above or below the image (content), but am unable to find a way to put the pager on top of my image (content). Thanks for reading, Martijn
[jQuery] Re: Cycle plugin pager over image
Thanks alot for your response Chuck!
i'm using the following:
CSS:
#slideshow { position:relative; width: 500px; height: 500px;}
#nav a { padding: 5px 10px 5px 10px; background: white; text-
decoration: none; color: black }
#nav a.activeSlide { background: #fbb040; color: white }
#nav a:focus { outline: none }
#nav { position:absolute;top:0px; left:0px; margin-top:5px; text-
align: left; font-family: verdana, arial; font-size: 12px; width:
630px; height:20px; }
jQuery:
$(function() {
$('#slideshow').cycle({
delay: 2000,
timeout: 4000,
speed: 500,
pause: 1,
pager: '#nav'
});
});
HTML:
http://farm4.static.flickr.com/
3561/3420671870_e409274ea7.jpg" border="0" width="500" height="500" /
>
http://farm4.static.flickr.com/
3169/2922317216_9483a0ed91.jpg" border="0" width="500" height="500" /
>
http://farm3.static.flickr.com/
2371/2407504400_7be3e047a7.jpg" border="0" width="500" height="500" /
>
http://farm4.static.flickr.com/
3125/2370991056_4500f48a03.jpg" border="0" width="500" height="500" /
>
Thanks for looking !!
best regards, Martijn
On Apr 7, 3:27 pm, Chuck Harmston wrote:
> Hi Martijn,
> You would actually want to do this using CSS, not Javascript. The easiest
> way to accomplish this would be to set the container div (the one you
> applied the .cycle() method to) to position: relative, then absolutely
> position the pager element. If you post the HTML markup you're using, I can
> give you more detailed instructions.
>
> Hope this helps!
>
> Chuck Harmstonhttp://chuckharmston.com
>
> On Tue, Apr 7, 2009 at 8:57 AM, martijn397 wrote:
>
> > Hello everyone!
>
> > After using the Cycle plugin for quite some time now i was wondering
> > if there is any way to get the "auto-generated pager" shown over my
> > image.
>
> > I can only see the .before and .after tags which put the pager above
> > or below the image (content), but am unable to find a way to put the
> > pager on top of my image (content).
>
> > Thanks for reading,
> > Martijn
[jQuery] Re: Cycle plugin pager over image
Thanks alot for your response Chuck!
i'm using the following:
CSS:
#slideshow { position:relative; width: 500px; height: 500px;}
#nav a { padding: 5px 10px 5px 10px; background: white; text-
decoration: none; color: black }
#nav a.activeSlide { background: #fbb040; color: white }
#nav a:focus { outline: none }
#nav { position:absolute;top:0px; left:0px; margin-top:5px;
text-
align: left; font-family: verdana, arial; font-size: 12px; width:
630px; height:20px; }
jQuery:
$(function() {
$('#slideshow').cycle({
delay: 2000,
timeout: 4000,
speed: 500,
pause: 1,
pager: '#nav'
});
});
HTML:
http://farm4.static.flickr.com/
3561/3420671870_e409274ea7.jpg" border="0" width="500" height="500" />
http://farm4.static.flickr.com/
3169/2922317216_9483a0ed91.jpg" border="0" width="500" height="500" />
http://farm3.static.flickr.com/
2371/2407504400_7be3e047a7.jpg" border="0" width="500" height="500" />
http://farm4.static.flickr.com/
3125/2370991056_4500f48a03.jpg" border="0" width="500" height="500" />
Thanks for looking !!
best regards, Martijn
On Apr 7, 3:27 pm, Chuck Harmston wrote:
> Hi Martijn,
> You would actually want to do this using CSS, not Javascript. The easiest
> way to accomplish this would be to set the container div (the one you
> applied the .cycle() method to) to position: relative, then absolutely
> position the pager element. If you post the HTML markup you're using, I can
> give you more detailed instructions.
>
> Hope this helps!
>
> Chuck Harmstonhttp://chuckharmston.com
>
> On Tue, Apr 7, 2009 at 8:57 AM, martijn397 wrote:
>
> > Hello everyone!
>
> > After using the Cycle plugin for quite some time now i was wondering
> > if there is any way to get the "auto-generated pager" shown over my
> > image.
>
> > I can only see the .before and .after tags which put the pager above
> > or below the image (content), but am unable to find a way to put the
> > pager on top of my image (content).
>
> > Thanks for reading,
> > Martijn
