[jQuery] Re: Cycle plugin postback problem in ASP.Net
View the markup after the postback (use firebug). I can almost
guarantee there are extra elements in the slideshow container, perhaps
brs or empty paragraphs or something. Post a link if you can.
Mike
On Dec 7, 11:31 pm, Michael mikedr...@gmail.com wrote:
Anyone have an ideas or advice?
Mike
On Dec 1, 9:10 am, Michael mikedr...@gmail.com wrote:
Hi Everyone!
I have encountered an issue trying to use the cycle plugin to show a
very simple image slideshow in ASP.Net. I have the cycle plugin in a
master page and it works great until a postback is performed on a
page. When I perform a postback an empty slide is inserted between
every image. The slideshow becomes: blank - image 1 - blank - image
2 - blank - image 1 ...
Once I navigate to another page the slideshow is fine again until a
postback is performed.
Has anyone had any experience with this?
Mike
Just in case anyone finds it helpful, here is what I am doing ...
Here is my master page:
%@ Master Language=C# AutoEventWireup=true
CodeBehind=Master.master.cs
Inherits=WebProject %
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head runat=server
titleUntitled/title
asp:ContentPlaceHolder ID=head runat=server
/asp:ContentPlaceHolder
link rel=Stylesheet type=text/css href=Master/
HeaderSlideshow.css /
/head
body style=margin-left: 0px; margin-right: 0px;
form id=form runat=server
script src='%=ResolveUrl(~/Scripts/jquery.js ) %' type=text/
javascript/script
script src='%=ResolveUrl(~/Scripts/jquery.cycle.plugin.js )
%' type=text/javascript/script
script src='%=ResolveUrl(~/Master/HeaderSlideshow.js ) %'
type=text/javascript/script
div
asp:ScriptManager ID=sm runat=server
/asp:ScriptManager
div class=headerSlideshow
asp:Repeater runat=server ID=slideshowRepeater
ItemTemplate
dxe:ASPxImage runat=server ID=image
ImageUrl='%# Container.DataItem %' EnableViewState=false
/dxe:ASPxImage
/ItemTemplate
/asp:Repeater
/div
/div
/form
/body
/html
Here is my javascript (HeaderSlideshow.js):
$(document).ready(function() {
$('.headerSlideshow').cycle({
fx: 'scrollDown',
speed: 1000,
cleartype: true,
cleartypeNoBg: true,
timeoutFn: calculateSlideTimeout
});
});
function calculateSlideTimeout(currElement, nextElement, opts,
isForward) {
// Set odd number slides (which will always be the eas logo) to
have 11 second timeouts
// and even number slides (which will be RAC, broker or
association logos) to have 4 second timeouts
var index = opts.currSlide;
return index % 2 ? 4000 : 11000;
}
Here is my css (HeaderSlideshow.css):
.headerSlideshow
{
width:300px;
height:80px;
margin:1px;
overflow:hidden;
border:0px;
}
.headerSlideshow img {
top: 0;
left: 0;
}
[jQuery] Re: Cycle plugin postback problem in ASP.Net
Anyone have an ideas or advice?
Mike
On Dec 1, 9:10 am, Michael mikedr...@gmail.com wrote:
Hi Everyone!
I have encountered an issue trying to use the cycle plugin to show a
very simple image slideshow in ASP.Net. I have the cycle plugin in a
master page and it works great until a postback is performed on a
page. When I perform a postback an empty slide is inserted between
every image. The slideshow becomes: blank - image 1 - blank - image
2 - blank - image 1 ...
Once I navigate to another page the slideshow is fine again until a
postback is performed.
Has anyone had any experience with this?
Mike
Just in case anyone finds it helpful, here is what I am doing ...
Here is my master page:
%@ Master Language=C# AutoEventWireup=true
CodeBehind=Master.master.cs
Inherits=WebProject %
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd;
html xmlns=http://www.w3.org/1999/xhtml;
head runat=server
titleUntitled/title
asp:ContentPlaceHolder ID=head runat=server
/asp:ContentPlaceHolder
link rel=Stylesheet type=text/css href=Master/
HeaderSlideshow.css /
/head
body style=margin-left: 0px; margin-right: 0px;
form id=form runat=server
script src='%=ResolveUrl(~/Scripts/jquery.js ) %' type=text/
javascript/script
script src='%=ResolveUrl(~/Scripts/jquery.cycle.plugin.js )
%' type=text/javascript/script
script src='%=ResolveUrl(~/Master/HeaderSlideshow.js ) %'
type=text/javascript/script
div
asp:ScriptManager ID=sm runat=server
/asp:ScriptManager
div class=headerSlideshow
asp:Repeater runat=server ID=slideshowRepeater
ItemTemplate
dxe:ASPxImage runat=server ID=image
ImageUrl='%# Container.DataItem %' EnableViewState=false
/dxe:ASPxImage
/ItemTemplate
/asp:Repeater
/div
/div
/form
/body
/html
Here is my javascript (HeaderSlideshow.js):
$(document).ready(function() {
$('.headerSlideshow').cycle({
fx: 'scrollDown',
speed: 1000,
cleartype: true,
cleartypeNoBg: true,
timeoutFn: calculateSlideTimeout
});
});
function calculateSlideTimeout(currElement, nextElement, opts,
isForward) {
// Set odd number slides (which will always be the eas logo) to
have 11 second timeouts
// and even number slides (which will be RAC, broker or
association logos) to have 4 second timeouts
var index = opts.currSlide;
return index % 2 ? 4000 : 11000;
}
Here is my css (HeaderSlideshow.css):
.headerSlideshow
{
width:300px;
height:80px;
margin:1px;
overflow:hidden;
border:0px;
}
.headerSlideshow img {
top: 0;
left: 0;
}
[jQuery] Re: Cycle plugin won't start until all images have loaded (IE-only)
When using the cycle plugin to display a slideshow in IE(6/?), it won't start playing until all of the images have completely loaded. This causes a delay of 5-15 seconds depending on the size and quantity of images. There's no such problem with non-IE web browsers, however, all of which start playing the slideshow as soon as the first image has loaded. Does anyone know of a Cycle option or other workaround that can fix this? There is nothing in the plugin to cause this behavior. Cycle starts when you call cycle. Perhaps the ready event is not firing correctly in your environment. What version of jQuery are you using?
[jQuery] Re: Cycle plugin with link functionality
Hi, I have the cycle plugin setup so a series of thumbnails of the
image switch the bigger image upon mouseover. Much like this
example...http://www.malsup.com/jquery/cycle/pager6.html
except mine works by hovering over the thumbs like:
.cycle({
fx: 'fade',
speed: 'fast',
timeout: 9000,
pager: '#home-thumbs',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '#home-thumbs li:eq(' + (idx) + ') a';
}
I am trying to figure out how to also make those same thumbs also be
working links to other pages as well as hover controls. Any thoughts
on how I can execute this ?
You would have to do that manually by binding the click event on those
pager anchors.
Mike
[jQuery] Re: Cycle plugin with link functionality
Thanks for the response Mike.. could you please show me an example as
I am not clear on this...
On Nov 11, 1:04 pm, Mike Alsup mal...@gmail.com wrote:
Hi, I have the cycle plugin setup so a series of thumbnails of the
image switch the bigger image upon mouseover. Much like this
example...http://www.malsup.com/jquery/cycle/pager6.html
except mine works by hovering over the thumbs like:
.cycle({
fx: 'fade',
speed: 'fast',
timeout: 9000,
pager: '#home-thumbs',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '#home-thumbs li:eq(' + (idx) + ') a';
}
I am trying to figure out how to also make those same thumbs also be
working links to other pages as well as hover controls. Any thoughts
on how I can execute this ?
You would have to do that manually by binding the click event on those
pager anchors.
Mike
[jQuery] Re: Cycle plugin with link functionality
nevermind.. i figured it out
On Nov 11, 1:08 pm, zac zacharyf...@gmail.com wrote:
Thanks for the response Mike.. could you please show me an example as
I am not clear on this...
On Nov 11, 1:04 pm, Mike Alsup mal...@gmail.com wrote:
Hi, I have the cycle plugin setup so a series of thumbnails of the
image switch the bigger image upon mouseover. Much like this
example...http://www.malsup.com/jquery/cycle/pager6.html
except mine works by hovering over the thumbs like:
.cycle({
fx: 'fade',
speed: 'fast',
timeout: 9000,
pager: '#home-thumbs',
pagerEvent: 'mouseover',
pagerAnchorBuilder: function(idx, slide) {
return '#home-thumbs li:eq(' + (idx) + ') a';
}
I am trying to figure out how to also make those same thumbs also be
working links to other pages as well as hover controls. Any thoughts
on how I can execute this ?
You would have to do that manually by binding the click event on those
pager anchors.
Mike
[jQuery] Re: Cycle plugin issue in Safari Chrome
An update - I've been told it's happening on Firefox in most cases as well. I have v3.5.3 on a PC and that works fine, though I've been told the same issue happens on 3.0 on a PC and I've seen it for myself on 3.5.3 on a Mac. http://staging.pixelluxe.com/tt/child.html
[jQuery] Re: Cycle plugin issue in Safari Chrome
Slideshows work best when you declare the image sizes using the height and width attrs. When the images are cached it's not a problem because the browser knows the dimensions of the image, but if the images are not cached there is a reasonable chance that your slideshow will start before the images have been fully loaded. In that case, if you're not explicit about the dimensions of the slideshow and the slides (in css), you'll get what you get. Mike On Oct 21, 6:11 pm, poundcommapo...@gmail.com poundcommapo...@gmail.com wrote: An update - I've been told it's happening on Firefox in most cases as well. I have v3.5.3 on a PC and that works fine, though I've been told the same issue happens on 3.0 on a PC and I've seen it for myself on 3.5.3 on a Mac. http://staging.pixelluxe.com/tt/child.html
[jQuery] Re: Cycle plugin issue in Safari Chrome
I see. My gotcha on this is that the images are user-submitted, so while I have a width set for them, the height is going to be variable. I wrapped the function that calls cycle in a $(window).load function to wait until images have loaded, and that seems to have fixed me right up. Thanks much. On Oct 21, 7:39 pm, Mike Alsup mal...@gmail.com wrote: Slideshows work best when you declare the image sizes using the height and width attrs. When the images are cached it's not a problem because the browser knows the dimensions of the image, but if the images are not cached there is a reasonable chance that your slideshow will start before the images have been fully loaded. In that case, if you're not explicit about the dimensions of the slideshow and the slides (in css), you'll get what you get. Mike On Oct 21, 6:11 pm, poundcommapo...@gmail.com poundcommapo...@gmail.com wrote: An update - I've been told it's happening on Firefox in most cases as well. I have v3.5.3 on a PC and that works fine, though I've been told the same issue happens on 3.0 on a PC and I've seen it for myself on 3.5.3 on a Mac. http://staging.pixelluxe.com/tt/child.html
[jQuery] Re: Cycle plugin: centering images of variable width?
A better way to approach this is to wrap the images in divs and then
cycle the divs. You can then count on it working correctly for all
the transition effects.
http://jquery.malsup.com/cycle2/center-horz.html
Mike
On Oct 17, 4:25 pm, David Collins floyd1...@gmail.com wrote:
I didn't see this as an option, so I decided to give it a try on my
own. I was able to add some lines of code (shown with the in the
margin below) to the jquery.cycle.js script to read in the width of
each image and center the slide within the slideshow container
// set position and zIndex on all the slides
// read in each image's width and center it wrt the slideshow width
$slides.each(function(i){
var imgwidth = $(this).attr(width);
$(this).css('left', (opts.width-imgwidth)/2);
});
$slides.css({position: 'absolute', top:0}).hide().each(function(i)
{ // removed the top value since it is being defined above
var z = first ? i = first ? els.length - (i-first) : first-i
:
els.length-i;
$(this).css('z-index', z)
});
This works great for images that are pre-defined in the markup, but
when I use the addSlide option, the newly added slides do not get
modified in the above code. Any suggestions on where I can put this
chunk of code so that it gets run *after* the slides are added to the
slideshow? Should I get the img width and define the left position
for each slide during the actual cycle function, or maybe during the
// reset common props before the next transition section?
Any help would be appreciated.
Thanks,
-David
[jQuery] Re: Cycle plugin: centering images of variable width?
Thanks for the reply, Mike. It never occurred to me to cycle something other than the actual image. I will take a look at this approach. -David
[jQuery] Re: Cycle Plugin -- Multiple Divs manipulated with one pager
Hey all -- I've built a site that has two divs with variable content (eventually this will become 3, but I assume it will scale up to that with no major issues). I'd like to be able to change content with each of them using the same pager. Here's an example of how to do this: http://www.malsup.com/jquery/cycle/pager-double.html Mike
[jQuery] Re: Cycle Plugin not working in IE - who can help?
Remove the comma at the end of this line:
prev: '#prev' ,
trailing commas at the end of an array are not allowed in IE 6/7.
Also, next time please post a link instead of all your markup if
possible.
Cheers!
Mike
On Oct 9, 4:45 am, First Impression dancollin...@googlemail.com
wrote:
Hi,
I am currently developing a site for a client which uses the JQuery
cycle plugin to move through a number of divs which contain pictures
and info about wedding dresses.
All works fine in Firefox, but when I test in IE6 + IE7 the divs are
all stacked on top of each other vertically and they soan right down
the screen for 1000's of pixels.
To me it seems like this is a problem with absolute/relative
positioning or the z-index, I have also used a few floats in the child
divs.
I am also using SIFR for text replacement, could this be conflicting?
Here is my code, can anyone see a problem that would cause my cycle
not to work in IE.?
--
XHTML
--
code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleWedding Dresses ~ Cavendish Bridal House/title
link rel=stylesheet type=text/css media=all href=css/
reset.css /
link rel=stylesheet type=text/css media=all href=css/
text.css /
link rel=stylesheet type=text/css media=all href=css/960.css /
link rel=stylesheet type=text/css media=all href=css/
styles.css /
link rel=shortcut icon href=img/favicon.ico type=image/x-icon /
link rel=stylesheet href=css/sifr.css type=text/css
media=screen /
!--[if lte IE 6]
link rel=stylesheet type=text/css media=screen href=css/
ie6.css /
![endif]--
!--[if lt IE 7]
script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/
IE7.js
type=text/javascript
/script
/script
![endif]--
script src=js/sifr.js type=text/javascript/script
script src=js/sifr-config.js type=text/javascript/script
script src=js/jquery-1.3.2.min.js type=text/javascript/script
script src=js/jquery.cycle.all.min.js type=text/javascript/
script
script type=text/javascript
function initMenu() {
$('#menu ul').hide();
$('#menu ul#dressessub').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
/script
script type=text/javascript
$(document).ready(function() {
$('#wedding-dresses').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev' ,
});
});
/script
/head
body id=wedding-dress
div id=page-outer
div class=container_12 id=page
div class=grid_12 id=header
div id=logo
a href=index.html class=logo title=Cavendish Bridal
HouseCavendish Bridal House Hayfield/a /div!--end logo--
/div!--end header--
div id=content
div id=label
ul id=menu
lia href=index.html id=home
title=Home Home/a/li
lia href=georgia.html id=georgia
title=GeorgiaGeorgia/a/li
lia href=the-shop.html id=shop
title=The ShopThe Shop/a/li
li class=headlinka href=# id=your-
dress title=Your DressYour Dress/a
ul
lia href=what-to-
expect.html title=What to expect id=expectWhat to expect/a/
li
lia href=ordering-your-
dress.html title=Ordering your dress id=ordering Ordering your
dress/a/li
lia href=alterations.html
title=Alterations id=alterations Alterations/a/li
lia href=collections.html
title=Collections id=collections Collections/a/li
/ul
/li
li class=headlinka href=dresses.html
id=dresses title=DressesDresses/a
ul id=dresses-sub
lia href=wedding-dresses.html
id=wedding title=Wedding DressesWedding Dresses/a/li
lia href=bridesmaid-dresses.html
id=bridesmaid title= Bridesmaid DressesBridesmaid Dresses/a/
li
lia href=prom-dresses.html
id=prom title=Prom DressesProm Dresses/a/li
/ul
/li
lia href=accessories.html
id=accessories title=AccessoriesAccessories/a/li
lia
[jQuery] Re: Cycle Plugin not working in IE - who can help?
:O
Thank you a thousand times Mike, you have made my life a lot easier!!!
I have learnt my lesson for future reference.
Dan
On Oct 9, 12:22 pm, Mike Alsup mal...@gmail.com wrote:
Remove the comma at the end of this line:
prev: '#prev' ,
trailing commas at the end of an array are not allowed in IE 6/7.
Also, next time please post a link instead of all your markup if
possible.
Cheers!
Mike
On Oct 9, 4:45 am, First Impression dancollin...@googlemail.com
wrote:
Hi,
I am currently developing a site for a client which uses the JQuery
cycle plugin to move through a number of divs which contain pictures
and info about wedding dresses.
All works fine in Firefox, but when I test in IE6 + IE7 the divs are
all stacked on top of each other vertically and they soan right down
the screen for 1000's of pixels.
To me it seems like this is a problem with absolute/relative
positioning or the z-index, I have also used a few floats in the child
divs.
I am also using SIFR for text replacement, could this be conflicting?
Here is my code, can anyone see a problem that would cause my cycle
not to work in IE.?
--
XHTML
--
code
!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Strict//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd;
html xmlns=http://www.w3.org/1999/xhtml; xml:lang=en lang=en
head
meta http-equiv=content-type content=text/html; charset=utf-8 /
titleWedding Dresses ~ Cavendish Bridal House/title
link rel=stylesheet type=text/css media=all href=css/
reset.css /
link rel=stylesheet type=text/css media=all href=css/
text.css /
link rel=stylesheet type=text/css media=all href=css/960.css /
link rel=stylesheet type=text/css media=all href=css/
styles.css /
link rel=shortcut icon href=img/favicon.ico type=image/x-icon /
link rel=stylesheet href=css/sifr.css type=text/css
media=screen /
!--[if lte IE 6]
link rel=stylesheet type=text/css media=screen href=css/
ie6.css /
![endif]--
!--[if lt IE 7]
script src=http://ie7-js.googlecode.com/svn/version/2.0(beta3)/
IE7.js
type=text/javascript
/script
/script
![endif]--
script src=js/sifr.js type=text/javascript/script
script src=js/sifr-config.js type=text/javascript/script
script src=js/jquery-1.3.2.min.js type=text/javascript/script
script src=js/jquery.cycle.all.min.js type=text/javascript/
script
script type=text/javascript
function initMenu() {
$('#menu ul').hide();
$('#menu ul#dressessub').show();
$('#menu li a').click(
function() {
var checkElement = $(this).next();
if((checkElement.is('ul')) (checkElement.is(':visible'))) {
return false;
}
if((checkElement.is('ul')) (!checkElement.is(':visible'))) {
$('#menu ul:visible').slideUp('normal');
checkElement.slideDown('normal');
return false;
}
}
);
}
$(document).ready(function() {initMenu();});
/script
script type=text/javascript
$(document).ready(function() {
$('#wedding-dresses').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev' ,
});
});
/script
/head
body id=wedding-dress
div id=page-outer
div class=container_12 id=page
div class=grid_12 id=header
div id=logo
a href=index.html class=logo title=Cavendish Bridal
HouseCavendish Bridal House Hayfield/a /div!--end logo--
/div!--end header--
div id=content
div id=label
ul id=menu
lia href=index.html id=home
title=Home Home/a/li
lia href=georgia.html id=georgia
title=GeorgiaGeorgia/a/li
lia href=the-shop.html id=shop
title=The ShopThe Shop/a/li
li class=headlinka href=# id=your-
dress title=Your DressYour Dress/a
ul
lia href=what-to-
expect.html title=What to expect id=expectWhat to expect/a/
li
lia href=ordering-your-
dress.html title=Ordering your dress id=ordering Ordering your
dress/a/li
lia href=alterations.html
title=Alterations id=alterations Alterations/a/li
lia href=collections.html
title=Collections id=collections Collections/a/li
/ul
/li
li class=headlinka href=dresses.html
id=dresses title=DressesDresses/a
ul id=dresses-sub
lia href=wedding-dresses.html
id=wedding title=Wedding DressesWedding Dresses/a/li
lia href=bridesmaid-dresses.html
id=bridesmaid title= Bridesmaid DressesBridesmaid Dresses/a/
li
[jQuery] Re: cycle plugin and dropdown menu
Hi Vitto, Add these declarations to your ul#mainNav rule (main.css, line 149) position: relative; z-index: 50; For IE, you'll probably also need to add these to div#content (main.css, line 26) position: relative; z-index: 1; --Karl Karl Swedberg www.englishrules.com www.learningjquery.com On Sep 25, 2009, at 6:33 AM, hcvitto wrote: Hi i'm using the cycle plugin below a dropdown. Problem is that the dropdowns stay behind the slideshow. They have position absolute and higher z-index than the slideshow. Any solution? http://www.francesconizzola.it/_demo/ Thanks Vitto
[jQuery] Re: cycle plugin and dropdown menu [solved]
great!! Many thanks Karl!! Vitto On 25 Set, 15:45, Karl Swedberg k...@englishrules.com wrote: Hi Vitto, Add these declarations to your ul#mainNav rule (main.css, line 149) position: relative; z-index: 50; For IE, you'll probably also need to add these to div#content (main.css, line 26) position: relative; z-index: 1; --Karl Karl Swedbergwww.englishrules.comwww.learningjquery.com On Sep 25, 2009, at 6:33 AM, hcvitto wrote: Hi i'm using the cycle plugin below a dropdown. Problem is that the dropdowns stay behind the slideshow. They have position absolute and higher z-index than the slideshow. Any solution? http://www.francesconizzola.it/_demo/ Thanks Vitto
[jQuery] Re: Cycle plugin creating links
Several methods:
Simplest is put an a tag around each image in your markup.
Alternate method- create array of the url's and bind a click handler to
images. Index the images to the url array and the window function you
want such as open() for a new tab. Will need to modify cursor in CSS
for this method
var
urlArray=['http://www.yahoo.com','http://www.google.com','http://www.ebay.com'];
$("#mySlideshow img").click(function() {
var imageIndex= $(".pics img").index(this);
window.open(urlArray[imageIndex])// to open in same window use
window.location.assign(urlArray[imageIndex])
});
quez wrote:
Hi all,
I would like to link each image in the cycle to a specific page. Any
ideas on how to do this? I got it to cycle and everything is working
fine. I just want it so that the actual image is clickable.
Thank you.
[jQuery] Re: Cycle plugin creating links
I would like to link each image in the cycle to a specific page. Any ideas on how to do this? I got it to cycle and everything is working fine. I just want it so that the actual image is clickable. Here's an example: http://www.malsup.com/jquery/cycle/anchor.html
[jQuery] Re: Cycle plugin: problem showing slide titles in pager (using pagerAnchorBuilder function)
Hi Mike
Thank you very much for your suggestion, but that's not working either
I'm afraid - I still end up with just a blank space where I'd like the
title to appear.
(I also noticed that your method seems to strip the closing tag from
the #cycle-numbers div too, although I can't for the life of me work
out why it would do that!)
Cheers
Simon
On Aug 26, 8:20 pm, Mike Alsup mal...@gmail.com wrote:
This question has been asked several times in various places online,
but the solution that's usually given isn't working for me.
I want to show the slide titles (rather than just numbers) in the
pager, so am calling it like this:
jQuery(document).ready(function() {
jQuery('#cycle-pics').cycle({
speed:1000,
timeout:3000,
next:'#next',
prev:'#prev',
pager:'#cycle-numbers',
pagerAnchorBuilder: function(idx, slide) {
return 'a href=#'+(idx+1)+' '+ slide.title
+'/a';
}
});
});
The pagerAnchorBuilder function is correctly showing the slide
numbers, but not the titles.
Try this:
pagerAnchorBuilder: function(idx, slide) {
var txt = '' + (idx+1) + ' ' + $(slide).attr('title');
return 'a href=#'+ text +'/a';
}
[jQuery] Re: Cycle plugin: problem showing slide titles in pager (using pagerAnchorBuilder function)
This question has been asked several times in various places online,
but the solution that's usually given isn't working for me.
I want to show the slide titles (rather than just numbers) in the
pager, so am calling it like this:
jQuery(document).ready(function() {
jQuery('#cycle-pics').cycle({
speed:1000,
timeout:3000,
next:'#next',
prev:'#prev',
pager:'#cycle-numbers',
pagerAnchorBuilder: function(idx, slide) {
return 'a href=#'+(idx+1)+' '+ slide.title
+'/a';
}
});
});
The pagerAnchorBuilder function is correctly showing the slide
numbers, but not the titles.
Try this:
pagerAnchorBuilder: function(idx, slide) {
var txt = '' + (idx+1) + ' ' + $(slide).attr('title');
return 'a href=#'+ text +'/a';
}
[jQuery] Re: Cycle Plugin - Different Transition Effects for Pager and Auto-Advance?
Is it possible to use enable different transition effects for auto- advance versus the pager (that is, when a user clicks a pager item)? I'd like very much to use fade as images auto-advance without user input, but use a more advanced easing effect if the user clicks an item in the pager. Not currently supported.
[jQuery] Re: cycle plugin questions
apply overflow: hidden to container and try using synch: 1 in script. ckee wrote: I have a cycle working here: http://www.violinatta.com/node/19 Two questions: (1) initially more than one image shows, one under the other, eventually consolidating to 1. The container and images are both dimensioned. Suggestions how to correct this so just the one image appears initially? (2) In the demo here http://malsup.com/jquery/cycle/ the image seems never to go to white -- a fadein seems to start before the fadeout is complete. The malsup demo uses the default settings, though. Suggestions? Thanks in advance. Clark
[jQuery] Re: Cycle Plugin - Changing the options of the cycle
I define a cycle in document.ready as per usual. In my cycle I have different sets of images that i want to cycle through and only want certain ones to cycle as selected using the slideExpr option. Is there a way to change this option from: slideExpr: 'a' to: slideExpr: 'b' Nope. But you could stop and then restart the slideshow with a diff slideExpr.
[jQuery] Re: Cycle Plugin - Changing the options of the cycle
Thanks for the response.
But you could stop and then restart the slideshow with a diff
slideExpr.
I'm not sure if I understand how to do that. Am I recreating the
cycle to set the new slideExpr like this?
$(#chg).click(function(){
$('#show).cycle('stop');
$('#show).cycle({
fx: 'scrollHorz'
, slideExpr:'b'
, next: #next
, prev: #prev
})
}
I've tried something like the above and it just stopped working. Have
I missed anything?
[jQuery] Re: Cycle Plugin - Changing the options of the cycle
Also maybe I don't understand what slideExpr does but I thought it didn't look at child elements. I've set it to slideExpr: div and i have nested div tags. ex div table/ div/ /div div table/ div/ /div this renders as 4 slides when i set slideExpr. Is this expected behavior? I think what i really need would a classExpr. On Aug 14, 11:45 am, Mike Alsup mal...@gmail.com wrote: I define a cycle in document.ready as per usual. In my cycle I have different sets of images that i want to cycle through and only want certain ones to cycle as selected using the slideExpr option. Is there a way to change this option from: slideExpr: 'a' to: slideExpr: 'b' Nope. But you could stop and then restart the slideshow with a diff slideExpr.
[jQuery] Re: Cycle Plugin - Changing the options of the cycle
My solution was to show/hide one of 2 cycles, depending on which one i
needed, using .css('display', 'none') and .fadeIn. Once it was hidden
i stopped the cycle i hide and use .fadeIn to show the one i want.
Then it is started. Both cycles use the same pager, next, and prev
options.
The pager only works 100% on the initial document.ready creation of
the cycle. After switching to another cycle the indicators are the
only thing that work. The indicators might not work if the cycles
don't have the same number of elements. They aren't part of the start
for .click event of my cycle selection.
On Aug 14, 9:24 am, Z-Ender fing...@gmail.com wrote:
I define a cycle in document.ready as per usual. In my cycle I have
different sets of images that i want to cycle through and only want
certain ones to cycle as selected using the slideExpr option. Is
there a way to change this option from:
slideExpr: 'a'
to:
slideExpr: 'b'
another alternative i've considered is to make a cycle of cycles.
Does anyone have an example of that?
[jQuery] Re: Cycle Plugin Error in IE
Sorry *embarrassed - stray comma after pagerFactory.
Problem solved.
Hi,
I seem to have the jQuery cycle plugin working in most browsers, but
get an error in IE6/7 when using the following code:
script type=text/javascript
$(function() {
$('#slideshow')
.cycle({
fx: 'fade',
timeout: 0,
cleartype: 1,
speed: '1500',
prev: '#prev',
next: '#next, #slideshow',
pager: '#numbered',
pagerAnchorBuilder: pagerFactory,
});
function pagerFactory(idx, slide) {
var s = idx 8 ? ' style=display:none' : '';
return 'li'+s+'a href=#'+(idx+1)+'/a/li';
};
});
/script
If I remove 'pagerAnchorBuilder: pagerFactory' the function it
works ... I don't understand what it's doing!?
Hopefully someone can see whats wrong :)
Thanks,
Dan
NB: I can upload an example page if required.
[jQuery] Re: (Cycle Plugin) ScrollHorz problem in FF and Safari 3
Mike, Thanks! Sorry for the long delay... I got side-tracked by having to move my 74 year old mother-in-law into her new house! UGGGH! Anyway... this looks like it's doing the trick. I really appreciate your help. - John On Jul 25, 8:00 am, Mike Alsup mal...@gmail.com wrote: On Jul 21, 9:51 pm, bcbounders bcbound...@gmail.com wrote: When using the ScrollHorz effect in theCyclePlugin for inline HTML content, in Firefox and Safari 3, the very first time you trigger the transition, the content of the first slide appears to be being squished and ends up overlapping with the incoming slide/text. See an example here: http://tinyurl.com/mmddkn (click on any of the white text in the vertical image or click the Begin link at the bottom of the first block of text). Try giving your slides an explicit width. Instead of 95%, try 220px for example.
[jQuery] Re: Cycle Plugin: Pause the cycle from link withing the cycling content?
I have set up a cycle that contains a html contentent including a
'video playlist'. This is a javascript based list that updates a flash
video player with a new video inside the cycle. The videos are loading
fine, but for some reason when i call the cycle 'pause', it dosent
work?
i have testing the $('#feature').cycle('pause'); from a link outside
the cycle and that seems to be working, but it seems to be from the
links inside the cycle content.
here is the code i am using (i have made a custom crossfade
transition)
function feature() {
$('#featuretitle').hide();
$('#feature').after(
'div id=featurenav/div'
).cycle({
fx: 'crossfade',
pause: 1,
speed: 1000,
timeout: 8000,
cleartype: 1,
pager: '#featurenav'
});
}
function videoList(){
$('a.vidlink').click(function(){
var vidLink = $(this).attr('rel');
player.sendEvent('STOP');
player.sendEvent('LOAD',vidLink);
player.sendEvent('PLAY');
$('#feature').cycle('pause');
});
}
Does it work if you remove the pause:1 option?
[jQuery] Re: (Cycle Plugin) ScrollHorz problem in FF and Safari 3
On Jul 21, 9:51 pm, bcbounders bcbound...@gmail.com wrote: When using the ScrollHorz effect in the Cycle Plugin for inline HTML content, in Firefox and Safari 3, the very first time you trigger the transition, the content of the first slide appears to be being squished and ends up overlapping with the incoming slide/text. See an example here: http://tinyurl.com/mmddkn (click on any of the white text in the vertical image or click the Begin link at the bottom of the first block of text). Try giving your slides an explicit width. Instead of 95%, try 220px for example.
[jQuery] Re: Cycle Plugin: Pause the cycle from link withing the cycling content?
looked at this a couple of times ,,have you tried working with the
cleartypeNoBg option"
have seen other posts where things have been resolved using
cleartypeNoBg: false
welshy1984 wrote:
I am having an issue with pausing the cycle from links within the
cycle.
I have set up a cycle that contains a html contentent including a
'video playlist'. This is a _javascript_ based list that updates a flash
video player with a new video inside the cycle. The videos are loading
fine, but for some reason when i call the cycle 'pause', it dosent
work?
i have testing the $('#feature').cycle('pause'); from a link outside
the cycle and that seems to be working, but it seems to be from the
links inside the cycle content.
here is the code i am using (i have made a custom crossfade
transition)
function feature() {
$('#featuretitle').hide();
$('#feature').after(
'div id="featurenav"/div'
).cycle({
fx: 'crossfade',
pause: 1,
speed: 1000,
timeout: 8000,
cleartype: 1,
pager: '#featurenav'
});
}
function videoList(){
$('a.vidlink').click(function(){
var vidLink = $(this).attr('rel');
player.sendEvent('STOP');
player.sendEvent('LOAD',vidLink);
player.sendEvent('PLAY');
$('#feature').cycle('pause');
});
}
[jQuery] Re: Cycle Plugin Help - Image Anchors
Auuugh! This is so frustrating.. I can't get this to work.
Erik
On Jun 26, 2009, at 9:16 PM, Charlie wrote:
take a look at this demo http://malsup.com/jquery/cycle/goto2.html
would this work better for you? Change the inputs to a ul and
insert your images? Add functions to change class on active image if
you want to do any css to active pager image. I'm pretty sure you
can use options before and after to put in a function like
toggleClass() to change css on active image
Another way to go is modify this demo
http://malsup.com/jquery/cycle/pager7.html
Make an array or index function of your images source and change the
image source for pager from:
slide.src
to something like myImageSource[idx]
combining various demo concepts and functions is the way to look at
what you are trying to do
Erik R. Peterson wrote:
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped
slider . I wanted the pagination images , which were different
than the slide images, to do a hover type effect of highlighting
the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options
to trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default
text that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
look through the examples some more, there's quite a few of them with image rollovers. Then look through the options API and see how to customize them to do almost whatever you are needing http://www.malsup.com/jquery/cycle/pager6.html Erik R. Peterson wrote: Is it possible to use image rollovers instead of the default text that comes with the plugin? http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
I'm confused. these are images from the slides being used in the Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/bullet_1.gif')
no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus{width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see how
to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text
that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
I did one similar to what you are trying to do using looped slider . I
wanted the pagination images , which were different than the slide
images, to do a hover type effect of highlighting the active one.
I put an image directly into the a tag and the corresponding
off image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on image
so the highlighted image would show
Should be fairly easy to do same in cycle using the event options to
trigger add remove class
Erik R. Peterson wrote:
I'm
confused. these are images from the slides being used in the Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px;
height:27px; padding: 10px 10px 10px 10px; margin: 0px 0px 0px
10px;background: url('/img/slides/bullet_1.gif') no-repeat; cursor:
pointer; }
#nav a.activeSlide {height:21px;background-position:
-27px;}
#nav a:focus {width:27px; outline: none; cursor:
pointer;}
#nav img
{width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples
some more, there's quite a few of them with image rollovers. Then look
through the options API and see how to customize them to do almost
whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text that
comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped slider .
I wanted the pagination images , which were different than the slide
images, to do a hover type effect of highlighting the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options to
trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text
that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
take a look at this demo http://malsup.com/jquery/cycle/goto2.html
would this work better for you? Change the inputs to a ul and insert
your images? Add functions to change class on active image if you want
to do any css to active pager image. I'm pretty sure you can use
options "before" and "after" to put in a function like toggleClass()
to change css on active image
Another way to go is modify this demo
http://malsup.com/jquery/cycle/pager7.html
Make an array or index function of your images source and change the
image source for pager from:
slide.src
to something like myImageSource[idx]
combining various demo concepts and functions is the way to look at
what you are trying to do
Erik R. Peterson wrote:
Could
you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what
you are trying to do using looped slider . I wanted the pagination
images , which were different than the slide images, to do a hover type
effect of highlighting the active one.
I put an image directly into the a tag and the corresponding
off image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on image
so the highlighted image would show
Should be fairly easy to do same in cycle using the event options to
trigger add remove class
Erik R. Peterson wrote:
I'm
confused. these are images from the slides being used in the Cycle.
What if I wanted to use GIF's that are not related to the
images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding:
10px 10px 10px 10px; margin: 0px 0px 0px 10px;background:
url('/img/slides/bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position:
-27px;}
#nav a:focus {width:27px; outline: none; cursor:
pointer;}
#nav img {width:27px; height:21px; padding:
10px 10px 10px 10px; border: none; display: block; cursor: pointer; }
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the
examples some more, there's quite a few of them with image rollovers.
Then look through the options API and see how to customize them to do
almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default text that
comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: Cycle Plugin Help - Image Anchors
Thank you... Your suggestion... Will it remove the numbers?
Erik
On Jun 26, 2009, at 9:16 PM, Charlie wrote:
take a look at this demo http://malsup.com/jquery/cycle/goto2.html
would this work better for you? Change the inputs to a ul and
insert your images? Add functions to change class on active image if
you want to do any css to active pager image. I'm pretty sure you
can use options before and after to put in a function like
toggleClass() to change css on active image
Another way to go is modify this demo
http://malsup.com/jquery/cycle/pager7.html
Make an array or index function of your images source and change the
image source for pager from:
slide.src
to something like myImageSource[idx]
combining various demo concepts and functions is the way to look at
what you are trying to do
Erik R. Peterson wrote:
Could you take a look at my page?
http://www.enaturalskin.com
Erik
On Jun 26, 2009, at 6:31 PM, Charlie wrote:
I did one similar to what you are trying to do using looped
slider . I wanted the pagination images , which were different
than the slide images, to do a hover type effect of highlighting
the active one.
I put an image directly into the a tag and the corresponding off
image in background. Set display:none for the foreground images.
Paginator adds an ActiveClass and for that set display:block on
image so the highlighted image would show
Should be fairly easy to do same in cycle using the event options
to trigger add remove class
Erik R. Peterson wrote:
I'm confused. these are images from the slides being used in the
Cycle.
What if I wanted to use GIF's that are not related to the images?
Would something like this work in the CSS?
#nav a {width:27px; height:27px; padding: 10px 10px 10px 10px;
margin: 0px 0px 0px 10px;background: url('/img/slides/
bullet_1.gif') no-repeat; cursor: pointer; }
#nav a.activeSlide {height:21px;background-position: -27px;}
#nav a:focus {width:27px; outline: none; cursor: pointer;}
#nav img {width:27px; height:21px; padding: 10px 10px 10px 10px;
border: none; display: block; cursor: pointer; }�
Erik
On Jun 26, 2009, at 3:43 PM, Charlie wrote:
look through the examples some more, there's quite a few of them
with image rollovers. Then look through the options API and see
how to customize them to do almost whatever you are needing
http://www.malsup.com/jquery/cycle/pager6.html
Erik R. Peterson wrote:
Is it possible to use image rollovers instead of the default
text that comes with the plugin?
http://www.malsup.com/jquery/cycle/pager12.html
[jQuery] Re: cycle plugin image positioning issue
I recently ran into a similar situation where all slide shows other
than the first was not displaying properly since they are written into
the page after a mouse click on link like: $('#div').html($(href).html
());
So, since the first cycle slide show worked fine with css width:
100%;height:auto; I just used it's values across the board like:
var imgHt = $('#s1 img').height();
$('#s3,#s3 img,#s5,#s5 img').css({'height': imgHt });
I know you said your issue is resolved but this might be a more
flexible solution for you. I works like a dream for me on all browsers
I've tested ( ie6-8, firefox-all, Safari-win, Chrome, Opera-10).
On Jun 4, 9:43 am, Laker Netman laker.net...@gmail.com wrote:
On Jun 4, 10:17 am, Mike Alsup mal...@gmail.com wrote:
How do I eliminate or override the position: absolute; being
injected into the img tag, as that appears to be the culprit?
You can't eliminate it. For the slideshow to work the container
element must have 'relative' position and the slides must have
'absolute' position inside the container. I suspect your layout is
having trouble with the relatively positioned div, but you should be
able to sort that out.
Well after some gnashing-of-teeth and cursing I have it working :)
I googled [some more] and found this posting that gave me the clue I
needed:http://groups.google.com/group/jquery-en/browse_thread/thread/4123a44...
I hadn't set a height and width on the DIV hooked to thecycleplugin
containing the image(s). sigh
Regards,
Laker
[jQuery] Re: cycle plugin pagerAnchorBuilder
OK, there were no takers on this. In the unlikely event that anyone's
interested, here's the work-around that I arrived at. It's simple enough
that I think it will not cause me any problems, but I sure would like to
know what the right solution might be.
In the HTML, an image collection like this:
div id=cycleport
img class=cimg src=images/1.jpg alt = /
img class=cimg src=images/2.jpg alt = /
img class=cimg src=images/3.jpg alt = /
img class=cimg src=images/4.jpg alt = /
img class=cimg src=images/5.jpg alt = /
img class=cimg src=images/6.jpg alt = /
/div
using cycle, I navigate this collection with prev/next links, but I also
wanted to provide a drop-down list allowing the user to jump straight to
specific images and then go prev/next from there.
ul id=clientList
lia href=#Foo text/a/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
My solution (a very unsatisfying kluge) was to simply add empty, dummy
lines to the list thus:
ul id=clientList
li class=noshow/li
lia href=#Foo text/a/li
li class=noshow/li
li class=noshow/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
to allow the user to go directly to 2.jpg, 5.jpg, and 6.jpg by choosing
from the list and using a cycle call like this:
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText,
pager: '#clientList',
pagerAnchorBuilder: function(idx, slide) {
return '#clientList li:eq(' + (idx) + ') a';
}
});
If anybody has a cleaner solution, I'd sure love to know about it.
Jon
[jQuery] Re: cycle plugin pagerAnchorBuilder
ul id=clientList
lia href=#Foo text/a/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
If anybody has a cleaner solution, I'd sure love to know about it.
This is what I'd do:
ul id=clientList
lia href=# data-slide=2Foo text/a/li
lia href=# data-slide=5Bar text/a/li
lia href=# data-slide=6Baz text/a/li
/ul
$(function() {
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText
});
$('#clientList li a').click(function() {
var slide = $(this).attr('data-slide');
slide = parseInt(slide);
$('#cycleport').cycle(slide);
return false;
});
});
[jQuery] Re: cycle plugin pagerAnchorBuilder
Mike Alsup,
Thanks so much for pointing out the obvious; no really, I mean it
sincerely. I so often overlook the obvious, to my cost. I didn't realize
that I could simply pass a bare integer to the cycle call.
Admiration and gratitude for a wonderfully well thought out and effective
tool!
Jon
This is what I'd do:
ul id=clientList
lia href=# data-slide=2Foo text/a/li
lia href=# data-slide=5Bar text/a/li
lia href=# data-slide=6Baz text/a/li
/ul
$(function() {
$('#cycleport').cycle({
prev: '#prev',
next: '#next',
timeout: 0,
before: swapText
});
$('#clientList li a').click(function() {
var slide = $(this).attr('data-slide');
slide = parseInt(slide);
$('#cycleport').cycle(slide);
return false;
});
});
[jQuery] Re: Cycle plugin help
have you looked at the "even more advanced demos" on cycle site? If ever there was a plugin with a large variety of examples Cycle is it! You could at least find some examples that come close to what you want and be more specific about what it is you are trying to do by referencing them. Look at source code of examples also for the " how to..." ivanisevic82 wrote: Hi! I found this wonderfull plugin, http://www.malsup.com/jquery/cycle/int2.html I want to built something like "pager", in the link. I built it, but now I'd like to change something: i don't want a progressive numeration, but Id' like to define a different text or image customized, and not the "1" "2" "3"..ecc..of the example. How is possible to do this? Thank you!
[jQuery] Re: Cycle plugin help
Hi! I found this wonderfull plugin,http://www.malsup.com/jquery/cycle/int2.html I want to built something like pager, in the link. I built it, but now I'd like to change something: i don't want a progressive numeration, but Id' like to define a different text or image customized, and not the 1 2 3..ecc..of the example. You can customize the text however you like using the pagerAnchorBuilder option. Here's an example: http://www.malsup.com/jquery/cycle/pager14.html
[jQuery] Re: Cycle Plugin and Wordpress not playing nice
http://www.ltdmag.com/hometest/ You have an error: $(#indexGallery).cycle is not a function because this URL returns 404: http://www.ltdmag.com/hometest/ltdmag.com/wp-content/themes/ltd_theme/js/jquery.cycle.all.js
[jQuery] Re: cycle plugin image positioning issue
How do I eliminate or override the position: absolute; being injected into the img tag, as that appears to be the culprit? You can't eliminate it. For the slideshow to work the container element must have 'relative' position and the slides must have 'absolute' position inside the container. I suspect your layout is having trouble with the relatively positioned div, but you should be able to sort that out.
[jQuery] Re: cycle plugin image positioning issue
On Jun 4, 10:17 am, Mike Alsup mal...@gmail.com wrote: How do I eliminate or override the position: absolute; being injected into the img tag, as that appears to be the culprit? You can't eliminate it. For the slideshow to work the container element must have 'relative' position and the slides must have 'absolute' position inside the container. I suspect your layout is having trouble with the relatively positioned div, but you should be able to sort that out. Well after some gnashing-of-teeth and cursing I have it working :) I googled [some more] and found this posting that gave me the clue I needed: http://groups.google.com/group/jquery-en/browse_thread/thread/4123a44fcd3a3d1d I hadn't set a height and width on the DIV hooked to the cycle plugin containing the image(s). sigh Regards, Laker
[jQuery] Re: cycle plugin issue
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
speed: 1000,
prev: '#prev2',
next: '#next2',
easingIn : 'easeOutCubic',
easingOut : 'easeInBack'
The option names are 'easeIn' and 'easeOut'.
[jQuery] Re: cycle plugin with keyboard
I get it to work now, just change the selector window to document,
The IE really has no idea what window is LOL.
The working code
$(document).keydown(function(e){
if(e.which == 37){ $('.prev').click();}
else if(e.which == 39){ $('.next').click();}
});
On May 23, 8:34 am, runrunforest craigco...@gmail.com wrote:
its IE 7
On May 22, 9:13 pm, ryan.j ryan.joyce...@googlemail.com wrote:
possibly keycode vs. charcode. did you try the keypress thingy on
quirksmode to see what IE returns on keydown?
which version of IE isn't it working?
On May 22, 3:10 pm, runrunforest craigco...@gmail.com wrote:
thanks
I got this to work in all browser except... IE.
The code i used
$(window).keydown(function(e){
if(e.which == 37){ $('.prev').click();}
else if(e.which == 39){ $('.next').click();}
});
What makes IE not understand this ?
On May 22, 3:15 pm, ryan.j ryan.joyce...@googlemail.com wrote:
take a look here -http://www.quirksmode.org/js/keys.html
37: left
38: up
39: right
40: down
irritatingly, i completely forgot the arrow keys are a special case,
and won't trigger properly (or even consistently) the keypress event
across different browsers. try keydown or keyup to catch the charcode,
On May 22, 5:19 am, runrunforest craigco...@gmail.com wrote:
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug)
and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should
I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com
wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own,
maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard
arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
take a look here - http://www.quirksmode.org/js/keys.html
37: left
38: up
39: right
40: down
irritatingly, i completely forgot the arrow keys are a special case,
and won't trigger properly (or even consistently) the keypress event
across different browsers. try keydown or keyup to catch the charcode,
On May 22, 5:19 am, runrunforest craigco...@gmail.com wrote:
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
possibly keycode vs. charcode. did you try the keypress thingy on
quirksmode to see what IE returns on keydown?
which version of IE isn't it working?
On May 22, 3:10 pm, runrunforest craigco...@gmail.com wrote:
thanks
I got this to work in all browser except... IE.
The code i used
$(window).keydown(function(e){
if(e.which == 37){ $('.prev').click();}
else if(e.which == 39){ $('.next').click();}
});
What makes IE not understand this ?
On May 22, 3:15 pm, ryan.j ryan.joyce...@googlemail.com wrote:
take a look here -http://www.quirksmode.org/js/keys.html
37: left
38: up
39: right
40: down
irritatingly, i completely forgot the arrow keys are a special case,
and won't trigger properly (or even consistently) the keypress event
across different browsers. try keydown or keyup to catch the charcode,
On May 22, 5:19 am, runrunforest craigco...@gmail.com wrote:
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
thanks
I got this to work in all browser except... IE.
The code i used
$(window).keydown(function(e){
if(e.which == 37){ $('.prev').click();}
else if(e.which == 39){ $('.next').click();}
});
What makes IE not understand this ?
On May 22, 3:15 pm, ryan.j ryan.joyce...@googlemail.com wrote:
take a look here -http://www.quirksmode.org/js/keys.html
37: left
38: up
39: right
40: down
irritatingly, i completely forgot the arrow keys are a special case,
and won't trigger properly (or even consistently) the keypress event
across different browsers. try keydown or keyup to catch the charcode,
On May 22, 5:19 am, runrunforest craigco...@gmail.com wrote:
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
its IE 7
On May 22, 9:13 pm, ryan.j ryan.joyce...@googlemail.com wrote:
possibly keycode vs. charcode. did you try the keypress thingy on
quirksmode to see what IE returns on keydown?
which version of IE isn't it working?
On May 22, 3:10 pm, runrunforest craigco...@gmail.com wrote:
thanks
I got this to work in all browser except... IE.
The code i used
$(window).keydown(function(e){
if(e.which == 37){ $('.prev').click();}
else if(e.which == 39){ $('.next').click();}
});
What makes IE not understand this ?
On May 22, 3:15 pm, ryan.j ryan.joyce...@googlemail.com wrote:
take a look here -http://www.quirksmode.org/js/keys.html
37: left
38: up
39: right
40: down
irritatingly, i completely forgot the arrow keys are a special case,
and won't trigger properly (or even consistently) the keypress event
across different browsers. try keydown or keyup to catch the charcode,
On May 22, 5:19 am, runrunforest craigco...@gmail.com wrote:
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own,
maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard
arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
The plugin does not provide support for keyboard nav. You'd have to implement it yourself. On May 20, 9:48 pm, runrunforest craigco...@gmail.com wrote: In cycle plugin, ss there way to switch images by keyboard arrows instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
bind keypress to a check for the charcode/keycode and if your
condition is met, pass the js to load the next img?
$(document).keypress(function (e) {
if (e.which == 32 ) {
/* advance scroller! */
}
});
( lots of interesting stuff on this sort of thing at --
http://www.quirksmode.org/js/keys.html )
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: cycle plugin with keyboard
the all the arrow has charcode of 0 (zero). I know this by the code
var key = e.which;
alert(key);
So how the script which is right arrow which is left arrow.
On May 21, 10:51 pm, ryan.j ryan.joyce...@googlemail.com wrote:
yeah, stick this in document ready.
to simulate the click, get the id of element you'd normally click to
advance the scroller (inspect it with the mozilla plugin firebug) and
append .click()
On May 21, 4:45 pm, runrunforest craigco...@gmail.com wrote:
could you give some further tip, how can I simulate, where should I
put the code to (document.ready part ?).
On May 21, 10:28 pm, ryan.j ryan.joyce...@googlemail.com wrote:
$(window).keypress(function (e) {
if (e.which == 39 ) {
/* keypress right */
} elseif (e.which == 37 ) {
/* keypress left */
} else {
return false;
}
});
if you can't figure out how to advance the cycle on your own, maybe
try to simulate $('#scrollLeft').click()
On May 21, 2:48 am, runrunforest craigco...@gmail.com wrote:
In cycle plugin, ss there way to switch images by keyboard arrows
instead of clicking next, prev
[jQuery] Re: Cycle plugin and print styles
I'm using the excellent Cycle plugin, but I have a problem in that I would like my print style to act as if the Javascript wasn't there, i.e. each frame appear on the page rather than being set to display: none. Is this possible using Cycle and if so does anyone have any pointers as to what I need to do? Here's an example: http://www.malsup.com/jquery/cycle/basic2.html
[jQuery] Re: Cycle plugin - frame number / IE behaviour
It works ! Thanks again :o) On May 19, 9:24 pm, Mike Alsup mal...@gmail.com wrote: Use CSS style rules to position and stack the images. Do you mean forcing the images to be all at the same position ? Yes. That's what the plugin does once it is run, but you can do it in CSS to avoid flicker on page load.
[jQuery] Re: cycle plugin with keyboard
see this web site www.stunicholls.com in gallery section...
[jQuery] Re: Cycle plugin - frame number / IE behaviour
Does anybody know how to display the frame number (and total number of frames) using the standard plugin, only putting some code in the after: function callback ? http://www.malsup.com/jquery/cycle/count.html Second question : with IE7, if all images are already in cache, they all display on the page before the cycle starts and hide them. (one of the page is here :http://www.claudinedoury.com/portfolio_artek.htm). Is there a way to avoid that ? Use CSS style rules to position and stack the images.
[jQuery] Re: Cycle plugin - frame number / IE behaviour
On 19 mai, 15:48, Mike Alsup mal...@gmail.com wrote: http://www.malsup.com/jquery/cycle/count.html Wow !! That was fast ! Strangely, I never found this demo. Thanks a LOT ! Use CSS style rules to position and stack the images. Do you mean forcing the images to be all at the same position ? Thanks again, Clement
[jQuery] Re: Cycle plugin - frame number / IE behaviour
Use CSS style rules to position and stack the images. Do you mean forcing the images to be all at the same position ? Yes. That's what the plugin does once it is run, but you can do it in CSS to avoid flicker on page load.
[jQuery] Re: cycle plugin not working
head
script type=text/javascript src=/jquery/cycle.js/script
script type=text/javascript src=/jquery/jquery-1.3.2.min.js/
script
This is backwards. You need to include jquery before you include the
cycle plugin.
On May 18, 1:31 am, surreal5335 surrea...@hotmail.com wrote:
I am trying to use the cycle plugin but all I get is a static list. I
have checked to make sure all my code is matching with the demos
online and still I dont get anywhere.
I have loaded this code inside the .ready function
$('#s1').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next2',
prev: '#prev2'
});
This part has been loaded into the body tag obviously.
div id=s1 class=pics
img src=/photo_site/pictures/bee.png alt=1a height=400
width=600/
img src=/photo_site/pictures/Bridge.jpg alt=1b height=400
width=600/
img src=/photo_site/pictures/Cat.jpg alt=1c height=400
width=600/
img src=/photo_site/pictures/desert.jpg alt=1d height=400
width=600/
img src=/photo_site/pictures/France.jpg alt=1e height=400
width=600/
img src=/photo_site/pictures/House.jpg alt=1f height=400
width=600/
/div
This part has been loaded into the body tag obviously.
The page containing the code is:
http://royalvillicus.com/photo_site/...e/photo_1.html
The images are shown at the bottom
Thanks a lot for all your help
[jQuery] Re: cycle plugin not working
Thanks a lot for pointing that out, I made the change which changed nothing sadly. I even cleared my cache and refreashed everything to get the changes to take effect, but still nothing. I am sure that was one of the problems but there seems to other problems still Could you tell me if it is working for you? Also the iframe with the feedback inside of it, where it is appearing on the page for you. ( other people seem to be seeing it on a different place than me). Thanks a lot
[jQuery] Re: cycle plugin pager - get started..
ok i got it working. I was wondering if it is possible to change the nav links caption, or put some other image, not the source image but image of our choicethanks On May 7, 1:46 pm, idrish laxmidhar idrishlaxmid...@gmail.com wrote: hi. i am interested in using the cycle plugin and i dnt know how to get started.http://www.malsup.com/jquery/cycle/pager10.html i want to use this plugin. Now i dnt know how to get the nav links when i checkd the source there is only a *div id=nav* but nothing in it..when i checked using firebug the li appears. How do i get started. The basic, simple cycle plugin works perfectly, but for this pager demo i dnt know how to get the nav working. thanks a lot -- BEST WISHES. I |) r I |-|
[jQuery] Re: cycle plugin pager - get started..
ok i got it working. I was wondering if it is possible to change the nav links caption, or put some other image, not the source image but image of our choicethanks You can have the links contain whatever you wish using the pagerAnchorBuilder option. Check out the following demos: http://www.malsup.com/jquery/cycle/pager2.html http://www.malsup.com/jquery/cycle/pager3.html http://www.malsup.com/jquery/cycle/pager4.html http://www.malsup.com/jquery/cycle/pager6.html
[jQuery] Re: Cycle plugin Issue in Safari and Chrome browser
I had the same issue, but the following solution worked for me: To add
css rule specifying width and height to the div element in the head
section, just after the stylesheet link
For eg.
link href=css/stylesheet.css rel=stylesheet type=text/css
media=screen,projection /
style type=text/css
#s4{
width:240px;
height:160px;
}
/style
Now the text wraps for me in Safari, but this has created another
issue - the incoming div bumps into the outgoing div, creating a messy
look. Any ideas??
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Bump!
Same problem here. Code looks fine?
$('#feature .sim-link').toggle(function () {
$('#feature').cycle('stop');
}, function() {
$('#feature').cycle('start');
});
Anyone have a solution?
Dave
On Apr 27, 8:04 am, Nic Hubbard nnhubb...@gmail.com wrote:
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Nic, Are you still having a problem with this? Your pause and resume
anchors appear to be working just fine.
Mike
On Apr 27, 3:04 am, Nic Hubbard nnhubb...@gmail.com wrote:
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
There is no 'start' command for cycle. The available string commands
are stop, pause, and resume. If you want to stop the slideshow, then
to restart you need to pass in the options again.
Mike
On Apr 29, 10:07 am, davebowker d...@davebowker.com wrote:
Bump!
Same problem here. Code looks fine?
$('#feature .sim-link').toggle(function () {
$('#feature').cycle('stop');
}, function() {
$('#feature').cycle('start');
});
Anyone have a solution?
Dave
On Apr 27, 8:04 am, Nic Hubbard nnhubb...@gmail.com wrote:
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over
the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need
to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Hi Mike,
Yes, still having issues. It is not the anchors that I am concerned
about (the pause/play icon). It is when you click the Contact about
this artwork link, it should be pausing the cycle, which it is not
doing.
This is where my problem lies.
On Apr 29, 10:15 am, Mike Alsup mal...@gmail.com wrote:
Nic, Are you still having a problem with this? Your pause and resume
anchors appear to be working just fine.
Mike
On Apr 27, 3:04 am, Nic Hubbard nnhubb...@gmail.com wrote:
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over
the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need
to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Really? No one knows why the cycle pause is not working? Someone
must be using this!
On Apr 24, 8:25 am, Nic Hubbard nnhubb...@gmail.com wrote:
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I havepauseon hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose topausethe current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor thepause.
I have it in my click function, and everything in the click function
does work, but not thepause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pauseis working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want thepauseoption here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using thecycleplugin, but for some reason I can't get thepause
feature to work. I am showing a hidden div, and when I do, I need to
pausethe slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
//Pausethecycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume thecycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem topause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Anyone?
On Apr 23, 9:44 pm, Nic Hubbard nnhubb...@gmail.com wrote:
Shawn,
Yes, I have pause on hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose to pause the current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor the pause.
I have it in my click function, and everything in the click function
does work, but not the pause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pause is working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want the pause option here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using the cycle plugin, but for some reason I can't get the pause
feature to work. I am showing a hidden div, and when I do, I need to
pause the slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
// Pause the cycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume the cycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem to pause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Pause is working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want the pause option here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow at http://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using the cycle plugin, but for some reason I can't get the pause
feature to work. I am showing a hidden div, and when I do, I need to
pause the slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed:3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
// Pause the cycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume the cycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem to pause.
Example: http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle Plugin - Can't Get Pause To Work
Shawn,
Yes, I have pause on hover set, and this is correctly working. It is
when the overlay comes up, and it is suppose to pause the current
image, which, my code seems to be correct to do so $
('#artistCycleParent').cycle('pause'); but it just keeps cycling and
does not honor the pause.
I have it in my click function, and everything in the click function
does work, but not the pause. Once the user clicks off of the
overlay, it should resume.
On Apr 23, 9:22 pm, Shawn sgro...@open2space.com wrote:
Pause is working for me, with a catch.
If my mouse is not over the image, it cycles. Placing my mouse over the
image pauses the cycling.
Clicking the link brings up an overlay (?) and a form - at this point
the mouse is not over the image, but over the overlay/form. So the
image cycles as it should.
I don't think you want the pause option here. I think you want to
progamatically start/stop the cycling. See the section Manually
Pausing a slideshow athttp://malsup.com/jquery/cycle/int2.html.
HTH.
Shawn
Nic Hubbard wrote:
I am using the cycle plugin, but for some reason I can't get the pause
feature to work. I am showing a hidden div, and when I do, I need to
pause the slideshow.
Here is what I am using:
$('#artistCycleParent').cycle({
fx: 'fade',
speed: 3000,
timeout: 5000,
pause: 1,
next: '#artworkNext',
prev: '#artworkPrev'
});
// Pause the cycle
$('#pauseButton').click(function() {
$('#artistCycleParent').cycle('pause');
$(this).hide();
$('#resumeButton').show();
return false;
});
// Resume the cycle
$('#resumeButton').click(function() {
$('#artistCycleParent').cycle('resume');
$(this).hide();
$('#pauseButton').show();
return false;
});
The code looks ok to me, but it just does not seem to pause.
Example:http://www.caldwellsnyder.com/artists/montoya-ortiz/view-artworks
Click on Contact about artwork
Thanks.
[jQuery] Re: Cycle plugin Issue in Safari and Chrome browser
Having a similar issue with text content. Text does not wrap in Safari
(using this as a quote scroller). All other browsers handle it fine.
div id=rotate
div class=sideQuotes
span class=sideTitleDid You Know?/spanbr /
pbABC.com/b is a great place to find...Pest Control, Pool
Cleaning, Electrical, and more!/p
/div
div class=sideQuotes
span class=sideTitleDid You Know?/spanbr /
pbXYZ.com/b is a great place to find...Pest Control, Pool
Cleaning, Electrical, and more!/p
/div
/div
Class sideQuotes has a set height/width... Even added one to the id
rotate to see if it would make a difference...
On Apr 13, 11:30 am, Mike Alsup mal...@gmail.com wrote:
div class=slideshow
div class=slideimg src=slide1.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
div class=slideimg src=slide2.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
/div
and the css:
.slideshow{
width:680px;
height:250px;
}
div.slidetext {
height:20px;
width:680px;
display:block;
margin-top:-25px;
margin-left:15px;
position:absolute;
}
div.textbackground {
display:block;
height:30px;
width:680px;
opacity:0.7;
margin-top:-30px;
position:absolute;
}
and both the height and the width of .slideshow are not recognized in
Chrome (but work fine in IE and FF).
How about either giving the slide elements a specific height/width or
adding height/width attributes to the img elements?- Hide quoted text -
- Show quoted text -
[jQuery] Re: Cycle plugin Issue in Safari and Chrome browser
I have the same issue with Chrome.
I just tried the newest version of Cycle but the problem is still
there.
Wrapping the cycle div in another one fixes the problem but that seems
not really the way to go.
The code goes something like:
div class=slideshow
div class=slideimg src=slide1.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
div class=slideimg src=slide2.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
/div
and the css:
.slideshow{
width:680px;
height:250px;
}
div.slidetext {
height:20px;
width:680px;
display:block;
margin-top:-25px;
margin-left:15px;
position:absolute;
}
div.textbackground {
display:block;
height:30px;
width:680px;
opacity:0.7;
margin-top:-30px;
position:absolute;
}
and both the height and the width of .slideshow are not recognized in
Chrome (but work fine in IE and FF).
[jQuery] Re: Cycle plugin Issue in Safari and Chrome browser
div class=slideshow
div class=slideimg src=slide1.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
div class=slideimg src=slide2.jpg alt= title=brdiv
class=textbackgroundnbsp;/divdiv class=slidetext/div/
div
/div
and the css:
.slideshow{
width:680px;
height:250px;
}
div.slidetext {
height:20px;
width:680px;
display:block;
margin-top:-25px;
margin-left:15px;
position:absolute;
}
div.textbackground {
display:block;
height:30px;
width:680px;
opacity:0.7;
margin-top:-30px;
position:absolute;
}
and both the height and the width of .slideshow are not recognized in
Chrome (but work fine in IE and FF).
How about either giving the slide elements a specific height/width or
adding height/width attributes to the img elements?
[jQuery] Re: cycle plugin - background color in IE?
Thanks. you save me today.
[jQuery] Re: Cycle plugin pager over image
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 Harmston http://chuckharmston.com On Tue, Apr 7, 2009 at 8:57 AM, martijn397 martijn...@gmail.com 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:
div id=slideshow
img src=http://farm4.static.flickr.com/
3561/3420671870_e409274ea7.jpg border=0 width=500 height=500 /
/a
img src=http://farm4.static.flickr.com/
3169/2922317216_9483a0ed91.jpg border=0 width=500 height=500 /
/a
img src=http://farm3.static.flickr.com/
2371/2407504400_7be3e047a7.jpg border=0 width=500 height=500 /
/a
img src=http://farm4.static.flickr.com/
3125/2370991056_4500f48a03.jpg border=0 width=500 height=500 /
/a
div id=nav/div
/div
Thanks for looking !!
best regards, Martijn
On Apr 7, 3:27 pm, Chuck Harmston cpharms...@gmail.com 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 martijn...@gmail.com 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:
div id=slideshow
img src=http://farm4.static.flickr.com/
3561/3420671870_e409274ea7.jpg border=0 width=500 height=500 /
img src=http://farm4.static.flickr.com/
3169/2922317216_9483a0ed91.jpg border=0 width=500 height=500 /
img src=http://farm3.static.flickr.com/
2371/2407504400_7be3e047a7.jpg border=0 width=500 height=500 /
img src=http://farm4.static.flickr.com/
3125/2370991056_4500f48a03.jpg border=0 width=500 height=500 /
div id=nav/div
/div
Thanks for looking !!
best regards, Martijn
On Apr 7, 3:27 pm, Chuck Harmston cpharms...@gmail.com 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 martijn...@gmail.com 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
It seems to me that this code should have the pager positioned absolutely
over the top left of the image. Do you have a live example that I could take
a look at?
P.S. It probably makes semantic sense to turn the images into an unordered
list :)
Chuck Harmston
cpharms...@gmail.com
Cell: (612) 961-0690
On Tue, Apr 7, 2009 at 10:28 AM, martijn397 martijn...@gmail.com wrote:
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:
div id=slideshow
img src=http://farm4.static.flickr.com/
3561/3420671870_e409274ea7.jpg border=0 width=500 height=500 /
/a
img src=http://farm4.static.flickr.com/
3169/2922317216_9483a0ed91.jpg border=0 width=500 height=500 /
/a
img src=http://farm3.static.flickr.com/
2371/2407504400_7be3e047a7.jpg border=0 width=500 height=500 /
/a
img src=http://farm4.static.flickr.com/
3125/2370991056_4500f48a03.jpg border=0 width=500 height=500 /
/a
div id=nav/div
/div
Thanks for looking !!
best regards, Martijn
On Apr 7, 3:27 pm, Chuck Harmston cpharms...@gmail.com 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 martijn...@gmail.com 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: pulling in only child elements with a certain class?
I thought it might be possible using the slideExpr option, but I think
I'm misunderstanding how that works. When I try this:
$('#slideshowl').cycle({
fx: 'fade',
pause: 1,
speed: 600,
timeout: 3,
slideExpr: 'div.web'
});
I get an empty set.
No, you're not misunderstanding. That's exactly what that option is
for. Can you post a link to the page?
[jQuery] Re: Cycle plugin and paging
Well I figured it out
[code]
$(document).ready(function(){
$('.rotator').each(function(){
$(this).after('div class=rotatorcontrol/div');
$(this).cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager:$(this).next()
});
});
});
[/code]
[html]
div class=rotator
img src=images/penguin.jpg width=200 height=200 /
img src=images/lock.gif width=200 height=200 /
img src=images/ecoimpact.jpg width=200 height=200 /
/div div id=foo name=bar/div
div class=rotator
img src=images/penguin.jpg width=200 height=200 /
img src=images/lock.gif width=200 height=200 /
img src=images/ecoimpact.jpg width=200 height=200 /
/div
[/html]
hope this helps ohters
Mike
On Apr 2, 2:50 pm, Mean Mike mcgra...@gmail.com wrote:
Hello all
I am trying to work with the cycle plugin and I'm having a bit of a
problem (what's new?) here is the scenario . I have multiple groups of
images that I want to cycle but I don't want to target them by id I
would rather target them by class however I also would like to use
paging. so I tried this
[code]
$(document).ready(function(){
$('.pics')
.after('div id=nav')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: .next() //this does not work
//pager: '#nav'
});
});
[/code]
[html]
div class=pics
img src=images/penguin.jpg width=200 height=200 /
img src=images/lock.gif width=200 height=200 /
img src=images/ecoimpact.jpg width=200 height=200 /
/div
div id=test/div
div class=pics
img src=images/penguin.jpg width=200 height=200 /
img src=images/lock.gif width=200 height=200 /
img src=images/ecoimpact.jpg width=200 height=200 /
/div
[/html]
Does anyone know what I'm doing wrong ?
any help would be greatly appreciated
thanks
Mike
[jQuery] Re: cycle plugin - background color in IE?
yeah. it's the cleartype fix. i added cleartype: 0, // disable cleartype corrections to my cycle function, and the background went away. meh. --charles.
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
It also seems to only be an issue with the latest release I am using an older version of cycle and it works fine I will try the issues mentioned above also. On Mar 29, 6:07 pm, Christian Cibelli chcibe...@gmail.com wrote: Hey Mike, I have the same problem on my site. I added the cleartypeNoBg but nothing happens, it just was fixed when i use cleartype but, the text goes ugly :( any idea? thanks a lot, On Mar 29, 11:09 am, Merindol rndme...@gmail.com wrote: Great option ! And the text is no affected. Thanks to you. Mike Alsup a écrit : Thanks for the tip. Removing the cleartype solves the issue but indeed the text is ugly (I'm usingCycleon paragraphs of text). Actually, instead of removing cleartype, I just added the CSS rule background: transparent !important; on paragraphs, because I discovered that on IE7/8 a background-color is added. Actually, you can probably solve it by setting the 'cleartypeNoBg' option to false. I always forget about that one. Cheers!
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
I just added cleartypeNoBg: true and that removed the background on the newest version if cycle On Mar 30, 11:47 am, Smoggy nate.scave...@gmail.com wrote: It also seems to only be an issue with the latest release I am using an older version ofcycleand it works fine I will try the issues mentioned above also. On Mar 29, 6:07 pm, Christian Cibelli chcibe...@gmail.com wrote: Hey Mike, I have the same problem on my site. I added the cleartypeNoBg but nothing happens, it just was fixed when i use cleartype but, the text goes ugly :( any idea? thanks a lot, On Mar 29, 11:09 am, Merindol rndme...@gmail.com wrote: Great option ! And the text is no affected. Thanks to you. Mike Alsup a écrit : Thanks for the tip. Removing the cleartype solves the issue but indeed the text is ugly (I'm usingCycleon paragraphs of text). Actually, instead of removing cleartype, I just added the CSS rule background: transparent !important; on paragraphs, because I discovered that on IE7/8 a background-color is added. Actually, you can probably solve it by setting the 'cleartypeNoBg' option to false. I always forget about that one. Cheers!
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
I just added cleartypeNoBg: true and that removed the background on the newest version if cycle Try false, not true.
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
Great option ! And the text is no affected. Thanks to you. Mike Alsup a écrit : Thanks for the tip. Removing the cleartype solves the issue but indeed the text is ugly (I'm using Cycle on paragraphs of text). Actually, instead of removing cleartype, I just added the CSS rule background: transparent !important; on paragraphs, because I discovered that on IE7/8 a background-color is added. Actually, you can probably solve it by setting the 'cleartypeNoBg' option to false. I always forget about that one. Cheers!
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
Hey Mike, I have the same problem on my site. I added the cleartypeNoBg but nothing happens, it just was fixed when i use cleartype but, the text goes ugly :( any idea? thanks a lot, On Mar 29, 11:09 am, Merindol rndme...@gmail.com wrote: Great option ! And the text is no affected. Thanks to you. Mike Alsup a écrit : Thanks for the tip. Removing the cleartype solves the issue but indeed the text is ugly (I'm using Cycle on paragraphs of text). Actually, instead of removing cleartype, I just added the CSS rule background: transparent !important; on paragraphs, because I discovered that on IE7/8 a background-color is added. Actually, you can probably solve it by setting the 'cleartypeNoBg' option to false. I always forget about that one. Cheers!
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
I have the same problem on my site. I added the cleartypeNoBg but nothing happens, it just was fixed when i use cleartype but, the text goes ugly :( any idea? No ideas other than what I already posted. Maybe you could post a link to your site?
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
Hi.
Thanks for the tip. Removing the cleartype solves the issue but indeed
the text is ugly (I'm using Cycle on paragraphs of text).
Actually, instead of removing cleartype, I just added the CSS rule
background: transparent !important; on paragraphs, because I
discovered that on IE7/8 a background-color is added.
Best regards.
On 25 mar, 23:15, Mike Alsup mal...@gmail.com wrote:
It might have something to do with cleartype option. Try setting the
cleartype to false:
$('#slideshow').cycle({
cleartype: false
});
On Mar 25, 6:09 pm, Merindol rndme...@gmail.com wrote:
I have the same problem, but it's not white : it's the same color as
the first parent that has its background-color defined.
As a workaround I added background: transparent !important; to the
cycled blocks. But that doesn't help to find where the problem is.
Regards.
On 25 mar, 02:26, Smoggy nate.scave...@gmail.com wrote:
For some strange reason in IE I get a white background added to my
li tag each li has a transparent background PNG image. So it get
white corners where I should see a nice textured background basically
cycle changes the header of the site. which is rounded on the top
works fine in both FF and safari. any ideas where the white
background is coming from and how to fix it. If I remove the cycle js
it works correctly. if i use the IE developer tool bar the inline
style on the li looks like this.
LI class=relaxed png style=DISPLAY: block; Z-INDEX: 6; LEFT: 0px;
ZOOM: 1; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ff
cycleH=378 cycleW=919 jQuery1237943038750=5
I checked a different site I created and it was fine no background
color applied in IE
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
Thanks for the tip. Removing the cleartype solves the issue but indeed the text is ugly (I'm using Cycle on paragraphs of text). Actually, instead of removing cleartype, I just added the CSS rule background: transparent !important; on paragraphs, because I discovered that on IE7/8 a background-color is added. Actually, you can probably solve it by setting the 'cleartypeNoBg' option to false. I always forget about that one. Cheers!
[jQuery] Re: Cycle Plugin : [cycle] terminating; too few slides: 1
Well my foreach is fine, all tags are closed fine, firebug report my request fine but for this case, now im using something that i found using mootools Thanks u On Mar 24, 11:59 pm, pedalpete p...@hearwhere.com wrote: Yeah, but I've seen the same thing in my code, and it turned out I wasn't calling the 'foreach' properly. Look at the response you are getting from the server (I'm assuming ajax) or look for a tag not closed properly or something. Posting code or link is the only way we can help here. On Mar 24, 5:18 pm, Asinox asi...@gmail.com wrote: Hi, but im doing... i have a foreach with php for load the images, in the home pages i got the message, but in the another part to the website is fine... On Mar 24, 7:16 pm, pedalpete p...@hearwhere.com wrote: The message means that there isn't enough data in thecyclefor it to cyclethrough. Likely you are only loading yourcyclewrapper once, but you didn't include any code or a url, so it's tough to tell.
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
I have the same problem, but it's not white : it's the same color as the first parent that has its background-color defined. As a workaround I added background: transparent !important; to the cycled blocks. But that doesn't help to find where the problem is. Regards. On 25 mar, 02:26, Smoggy nate.scave...@gmail.com wrote: For some strange reason in IE I get a white background added to my li tag each li has a transparent background PNG image. So it get white corners where I should see a nice textured background basically cycle changes the header of the site. which is rounded on the top works fine in both FF and safari. any ideas where the white background is coming from and how to fix it. If I remove the cycle js it works correctly. if i use the IE developer tool bar the inline style on the li looks like this. LI class=relaxed png style=DISPLAY: block; Z-INDEX: 6; LEFT: 0px; ZOOM: 1; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ff cycleH=378 cycleW=919 jQuery1237943038750=5 I checked a different site I created and it was fine no background color applied in IE
[jQuery] Re: Cycle plugin adds white background in ie6 and ie7
It might have something to do with cleartype option. Try setting the
cleartype to false:
$('#slideshow').cycle({
cleartype: false
});
On Mar 25, 6:09 pm, Merindol rndme...@gmail.com wrote:
I have the same problem, but it's not white : it's the same color as
the first parent that has its background-color defined.
As a workaround I added background: transparent !important; to the
cycled blocks. But that doesn't help to find where the problem is.
Regards.
On 25 mar, 02:26, Smoggy nate.scave...@gmail.com wrote:
For some strange reason in IE I get a white background added to my
li tag each li has a transparent background PNG image. So it get
white corners where I should see a nice textured background basically
cycle changes the header of the site. which is rounded on the top
works fine in both FF and safari. any ideas where the white
background is coming from and how to fix it. If I remove the cycle js
it works correctly. if i use the IE developer tool bar the inline
style on the li looks like this.
LI class=relaxed png style=DISPLAY: block; Z-INDEX: 6; LEFT: 0px;
ZOOM: 1; POSITION: absolute; TOP: 0px; BACKGROUND-COLOR: #ff
cycleH=378 cycleW=919 jQuery1237943038750=5
I checked a different site I created and it was fine no background
color applied in IE
