Re: [jQuery] Cycle plugin: Fill browser heigth and width with images
perfidus wrote:
I just wonder where exactly in the cycle.plugin code should I place the
conditional:
if($(window).heigth() $(img).heigth())
{
//RESIZE THE PIC PROPORTIONALLY ETC...
}
To resize resize images which are being displayed with jquery cycle to full
browser width:
//establish global variables
var matchedWidth;
var matchedHeight;
//check browser aspect ratio against window aspect ratio
$.fn.resizeForBack = function() {
imgWidth = $(this).width();
imgHeight = $(this).height();
winWidth = $(window).width();
winHeight = $(window).height();
imgRatio = imgWidth / imgHeight;
winRatio = winWidth / winHeight;
if(imgRatio winRatio){
matchedHeight = winHeight;
matchedWidth = winHeight*imgRatio;
$(this).css({height: '100%', width: 'auto'});
}
else if(winRatio imgRatio){
matchedHeight = winWidth/imgRatio;
matchedWidth = winWidth;
$(this).css({width: '100%', height: 'auto'});
}
}
function onBefore(){
$(this).resizeForBack();
$(this).parent().find('img.current-slide').removeClass('current-slide');
}
function onAfter(){
$(this).addClass('current-slide');
}
//resize visible image on window resize
$(window).resize(function(event){
$('img.current-slide').resizeForBack();
});
//use a custom transition effect which doesn't constrain the images to their
original size
$('#main-back').cycle({
fx: 'custom',
speed: 1000,
timeout: 2,
containerResize: 0,
next: '#next-nav-home, #over-prev',
prev: '#prev-nav-home, #over',
before: onBefore,
after: onAfter,
cssBefore: {
left: 0,
top: 0,
width: matchedWidth,
height: matchedHeight,
opacity: 0.5,
zIndex: 1
},
animOut: {
opacity: 0,
},
animIn: {
left: 0,
top: 0,
opacity: 1,
width: matchedWidth+1, //animIn seems to
require a value differing
from cssBefore
height: matchedHeight+1
},
cssAfter: {
zIndex: 0
}
});
I haven't been able to find a more concise method, but this works and runs
fairly smoothly.
--
View this message in context:
http://old.nabble.com/Cycle-plugin%3A-Fill-browser-heigth-and-width-with-images-tp24729038s27240p27609687.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] jquery cycle plugin IE6 flicker (appears to reload elements repeatedly)
I believe the problem that you are experiencing is because IE6 has issues
when background images and opacity settings are adjusted.
I was doing something similar with the jquery cycle plugin and the only way
that I found to fix it was to place an IMG tag in the rotating item and
place it behind the content, thereby simulating a background image.
There is potentially another fix that is supposed to remove background
flicker/loading in IE6, but I have not had much luck with it. See the link
included below.
http://ajaxian.com/archives/no-more-ie6-background-flicker
websymphony wrote:
I've employed the jquery cycle plugin (great work malsup!) to display
banners for various hospitals (such as
http://intermountainhealthcare.org/hospitals/bearriver/Pages/home.aspx).
To display the banners, I nested the call within a separate script
containing
$(document).ready(function() {
(More scripts)
$('.ih-bannerCont').cycle({fx: 'fade', speed: 750, timeout: 7000,
before: contentOut, after: contentIn});
(More scripts)
});
While the cycler works great on IE7 and FF3, IE6 chokes as it tries to
reload the images each time the cycler changes views (this appears a
flicker between each slide, and a white background). I've reviewed
the cycler on malsup's jquery site, which works with no errors in
IE6. Did I miss something?
-Thanks
--
View this message in context:
http://old.nabble.com/jquery-cycle-plugin-IE6-flicker-%28appears-to-reload-elements--repeatedly%29-tp26957694s27240p27613236.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] jQuery Cycle plugin, previous and next image preview
Hello everyone, I am using the jQuery cycle plugin to create a very basic slideshow with 2 buttons (previous and next). Is it possible while running the slideshow to assign somehow on these 2 buttons a preview (like a tooltip or something) a preview of the previous and next images?
[jQuery] How to show one image at a time using jquery cycle plugin?
Hi I have 8 images but before the cycle(scrollUp) start, the first 4 images will display and then it move up one image at a time, and cycle through to the next image Like this: (img1-img2-img3-img4) then (img2-img3-img4-img5) then (img3-img4-img5- img6) then (img4-img5-img6-img7) then (img5-img6-img7-img8) . Anyone can help? Thanks!
[jQuery] Re: Jquery Cycle Plugin Bugs
ah thank you for that help, that clears up most of the issue. THe home page bug is very buggy it happens once in a while and with a refresh generally fixes itself. I guess the vast majorit of the time there is no issue. Thank you very much! I really appreciate it. On Jan 13, 12:15 pm, danny.copel...@gmail.com danny.copel...@gmail.com wrote: On another note, if you use fx: 'slideHorz' it will slide in the appropriate direction(left/right), depending on button you click (downwards = left, upwards = left). On Jan 13, 10:33 am, keli marks ckelima...@gmail.com wrote: Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Jquery Cycle Plugin Bugs
Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Re: Jquery Cycle Plugin Bugs
Homepage slideshow seems to work fine for me. Have you since found the error? As for the events slideshow, you should be able to avoid image size issues, try adding height and width attributes to the img tags. Should fix that. -Dan On Jan 13, 10:33 am, keli marks ckelima...@gmail.com wrote: Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] Re: Jquery Cycle Plugin Bugs
On another note, if you use fx: 'slideHorz' it will slide in the appropriate direction(left/right), depending on button you click (downwards = left, upwards = left). On Jan 13, 10:33 am, keli marks ckelima...@gmail.com wrote: Hey all: I'm having some odd bugs with 2 different kind slideshows. www.exhaciendalapetaca.com On my home page, on both mozilla and IE, instead of displaying the slideshow, the entire set of photos are displayed, stacked underneath eachother. It doesn't happen all the time. The second issue is on the events and rentals page. Sometime the slide photos turn into mini squashed photos. It doesn't happen all the time, and usually a refresh fixes it. Can anyone see from the code if i'm doing something to trigger this, or is there a bug fix? Thanks!
[jQuery] jQuery Cycle Plugin width problems
The Goal
I want to cycle through list items in an unordered list. I want the
list items to take up the full width of the browser, even when the
browser is resized.
The Problem
Once the first slide transition takes place and the browser is resized
smaller horizontal scroll bars are introduced. Then when the browser
is resized larger than the original size, the list item width is only
as wide as it was when the page was first loaded.
The Assumption
The cycle plugin needs to calculate the width of the item it is
transitioning and then sets it to that width.
The Question
Is it possible to keep all widths as percentages maintaining the fluid
width of the list item?
The HTML
ul class=slideshow
li class=lah3Label Applicators/h3/li
li class=pah3Print and Apply/h3/li
li class=tth3Table-Top Printers/h3/li
li class=hsh3High Speed/h3/li
li class=csh3Custom Systems/h3/li
/ul
div class=ssnavwrap
ul id=ssnav
li class=laa href=#LA/a/li
li class=paa href=#PA/a/li
li class=tta href=#TT/a/li
li class=hsa href=#HS/a/li
li class=csa href=#CS/a/li
/ul
/div
The CSS
.slideshow {
margin: 43px 0 0;
height: 340px;
}
.slideshow li {
height: 340px;
width: 100%;
overflow: hidden;
}
The Javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
height: 'auto',
width: 'auto',
fit: 0,
containerResize: 0,
speed: 1400,
timeout: 6000,
pager: '#ssnav',
manualTrump: false,
pagerAnchorBuilder: function(idx, slide) {
return '#ssnav li:eq(' + idx + ') a';
}
});
$('#ssnav li a').click(function() {
$('.slideshow').cycle('pause');
});
});
The Attempts
I've tried things like overflow: hidden in the CSS. I've tried options
in Cycle like width, fit, contatinerResize.
Thanks for any help on this.
[jQuery] Paging Ability with numbering and Text with jQuery Cycle Plugin
I have set up a test page at http://capnhud.host22.com/examples/sample_cycle.html but was wondering what would I need to change in order for the paging to resemble this a href=http://www.dickssportinggoods.com/home/ index.jsppage/a
[jQuery] Re: jQuery Cycle Plugin width problems
Thanks for any help on this.
.slideshow li {
width: 100% !important
}
[jQuery] jquery cycle plugin IE6 flicker (appears to reload elements repeatedly)
I've employed the jquery cycle plugin (great work malsup!) to display
banners for various hospitals (such as
http://intermountainhealthcare.org/hospitals/bearriver/Pages/home.aspx).
To display the banners, I nested the call within a separate script
containing
$(document).ready(function() {
(More scripts)
$('.ih-bannerCont').cycle({fx: 'fade', speed: 750, timeout: 7000,
before: contentOut, after: contentIn});
(More scripts)
});
While the cycler works great on IE7 and FF3, IE6 chokes as it tries to
reload the images each time the cycler changes views (this appears a
flicker between each slide, and a white background). I've reviewed
the cycler on malsup's jquery site, which works with no errors in
IE6. Did I miss something?
-Thanks
[jQuery] Cycle Plugin and IE6
Hi, We've been doing a slideshow for the featured content/ads on one of our sites and I'm having problems getting the plugin to work with IE6, I think maybe it's a CSS problem or something, but haven't nailed it yet. Anyone that could give me advice or anything? This is the URL of the slide: http://esuper.com.do/market/ Thanks
[jQuery] How do I allow not add width to the li tag with jQuery Cycle Plugin
I use this jquery-plugin: http://jquery.malsup.com/cycle/ Each li-tag gets a calculated width allowing the contents to 2 lines, but line 1 is sufficient. 2 lines breaks the design. The added width is not necessary. Is it possible NOT to add to this? Can anyone help me? It would be a great relief!
[jQuery] Re: How do I allow not add width to the li tag with jQuery Cycle Plugin
I use this jquery-plugin:http://jquery.malsup.com/cycle/ Each li-tag gets a calculated width allowing the contents to 2 lines, but line 1 is sufficient. 2 lines breaks the design. The added width is not necessary. Is it possible NOT to add to this? Can anyone help me? It would be a great relief! Can you post a link?
[jQuery] cycle plugin to rotate css background images - how please
how can i apply the simple fade example for the jquery cycle plugin to be used on a background image - instead of divs of images? i'm a complete novice at jquery and i'm building the site in drupal so i need some step by step if possible.
[jQuery] Cycle plugin postback problem in ASP.Net
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: jQuery Cycle Plugin and Captions - Please help!
Try this:
after: function(curr, next, opts) {
var alt = $(next).find('img').attr('alt');
$('#caption').html(alt);
}
On Nov 22, 12:12 am, Wroathe reallyto...@gmail.com wrote:
You're on the right track!!! I added an alt attribute to the
first .featured-image and it displayed exactly where I wanted it!!!
The question is now how to select the img tag nested in it (in the
interest of writing valid xhtml).
On Nov 21, 11:06 pm, Wroathe reallyto...@gmail.com wrote:
I tried it and it didn't work Mike. I did a console.log of the alt
variable afterwards and it was tossing undefined. I think this is
because I have all of the slides wrapped in divs. I'm not sure how to
remedy that problem. Is there a way of selecting the img's alt
attribute using the code you just gave me?
Sorry. I was a designer before dabbling in development. I still have a
lot to learn.
Thanks again!
On Nov 21, 10:58 pm, Wroathe reallyto...@gmail.com wrote:
I'll give that try and see how it works - thanks in advance for the
reply. I really appreciate it.
On Nov 21, 7:01 pm, Mike Alsup mal...@gmail.com wrote:
Try using the 'after' callback:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/
a';
},
after: function(curr, next, opts) {
var alt = $(next).attr('alt');
$('#caption').html(alt);
}
});
});
On Nov 21, 6:36 pm, Wroathe reallyto...@gmail.com wrote:
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx +
'/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] jQuery Cycle Plugin and Captions - Please help!
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!
Try using the 'after' callback:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/
a';
},
after: function(curr, next, opts) {
var alt = $(next).attr('alt');
$('#caption').html(alt);
}
});
});
On Nov 21, 6:36 pm, Wroathe reallyto...@gmail.com wrote:
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!
I'll give that try and see how it works - thanks in advance for the
reply. I really appreciate it.
On Nov 21, 7:01 pm, Mike Alsup mal...@gmail.com wrote:
Try using the 'after' callback:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/
a';
},
after: function(curr, next, opts) {
var alt = $(next).attr('alt');
$('#caption').html(alt);
}
});
});
On Nov 21, 6:36 pm, Wroathe reallyto...@gmail.com wrote:
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!
I tried it and it didn't work Mike. I did a console.log of the alt
variable afterwards and it was tossing undefined. I think this is
because I have all of the slides wrapped in divs. I'm not sure how to
remedy that problem. Is there a way of selecting the img's alt
attribute using the code you just gave me?
Sorry. I was a designer before dabbling in development. I still have a
lot to learn.
Thanks again!
On Nov 21, 10:58 pm, Wroathe reallyto...@gmail.com wrote:
I'll give that try and see how it works - thanks in advance for the
reply. I really appreciate it.
On Nov 21, 7:01 pm, Mike Alsup mal...@gmail.com wrote:
Try using the 'after' callback:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/
a';
},
after: function(curr, next, opts) {
var alt = $(next).attr('alt');
$('#caption').html(alt);
}
});
});
On Nov 21, 6:36 pm, Wroathe reallyto...@gmail.com wrote:
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx +
'/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] Re: jQuery Cycle Plugin and Captions - Please help!
You're on the right track!!! I added an alt attribute to the
first .featured-image and it displayed exactly where I wanted it!!!
The question is now how to select the img tag nested in it (in the
interest of writing valid xhtml).
On Nov 21, 11:06 pm, Wroathe reallyto...@gmail.com wrote:
I tried it and it didn't work Mike. I did a console.log of the alt
variable afterwards and it was tossing undefined. I think this is
because I have all of the slides wrapped in divs. I'm not sure how to
remedy that problem. Is there a way of selecting the img's alt
attribute using the code you just gave me?
Sorry. I was a designer before dabbling in development. I still have a
lot to learn.
Thanks again!
On Nov 21, 10:58 pm, Wroathe reallyto...@gmail.com wrote:
I'll give that try and see how it works - thanks in advance for the
reply. I really appreciate it.
On Nov 21, 7:01 pm, Mike Alsup mal...@gmail.com wrote:
Try using the 'after' callback:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx + '/
a';
},
after: function(curr, next, opts) {
var alt = $(next).attr('alt');
$('#caption').html(alt);
}
});
});
On Nov 21, 6:36 pm, Wroathe reallyto...@gmail.com wrote:
Hi there! I'm a little stuck and I was hoping someone could help me.
I've been trying to add captions to another div separate from the
slideshow and have them cycle with the slideshow and when the user
uses the pager. The one catch is I was hoping to use the images in the
slideshow's alt attributes as the captions. Here's the code, it'll do
a better job of explaining than I can.
The JS is as follows:
$(function() {
$('div#slides').cycle({
timeout: 7000,
pause: 1,
pager: 'div#buttons',
pagerAnchorBuilder: function(idx) {
return 'a id=pager-' + idx + ' href=#' + idx +
'/a';
}
});
});
The container I specified to contain the captions is
div id=buttonsPager anchors are here./div
div id=captionsspanAlt attribute would go here./span/div
The slideshow div looks like this
div id=slides
div class=featured-imagea href=slide1.htmlimg
src=images/image1.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide2.htmlimg
src=images/image2.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
div class=featured-imagea href=slide3.htmlimg
src=images/image3.jpg alt=This alt should be displayed as a caption
in #captions. height=300px width=940px //a/div
/div!--end slides--
So I want the alts to become the captions and to change when the
slideshow auto-advances or when the user clicks on the appropriate
pager.
Sorry, I'm a major noob :(
Thanks in advance for any help!
[jQuery] Re: jQuery cycle plugin
Finally discovered my own answer to this - the original code only fails if the fx: parameter is set to 'none' - if set to any other transition effect it works perfectly. Not sure why this should be, but there you go.
[jQuery] Re: jQuery cycle plugin
Can anyone help with this at all? Matthew
[jQuery] jQuery cycle plugin
I've been using the jquery cycle plugin (http://malsup.com/jquery/
cycle) and it's doing exactly as I want except that it doesn't seem to
recognise the first slide as slide one. I'm using the onAfter function
to to turn the next/prev links on and off as appropriate and to
display page 1 of ? but the next link persists on its own on page 2
(when you would expect the prev link to have appeared) and, although
the pages are counted correctly, page 2 shows up as page 1 of 7 same
as the real page one). You can see what I mean at:
http://www.nottingham.ac.uk/~ttzelrn/ma-tesol/module1/unit1/index.php
The structure of divs is quite involved but I think it's sound and, as
I say, the plugin is counting the divs ok.
Code below:
$(document).ready(function() {
$('#cycle-content').cycle({
fx: 'none',
prev: '#prev',
next: '#next',
after: onAfter,
timeout: 0
});
function onAfter(curr, next, opts) {
var index = opts.currSlide;
$('#prev')[index == 0 ? 'hide' : 'show']();
$('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
var caption = 'Page ' + (opts.currSlide + 1) + ' of ' +
opts.slideCount;
$('#caption').html(caption);
}
});
I'd be really grateful for any help with this.
Matthew
[jQuery] 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? JR
[jQuery] 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 ?
[jQuery] cycle plugin - remove positioning css?
I'm using the cycle plugin and was wondering if anyone has found a way to remove the position: relative from the main div and position: absolute from the imgs. This is added when the plugin is used. It's not very friendly in IE among other issues. Thanks! Adam
Re: [jQuery] how to multiple images slideshow with jquery cycle plugin
Here's a demo that Malsup was kind enough to make: http://www.malsup.com/jquery/cycle/div.html AND-20 wrote: Hi , i am new to jquery cycle plugin I would like to make a multiple images slideshow with jquery cycle plugin Say I have 12 images and I want to show 3 at a time and cycle through the 12 in this fashion: (img1-img2-img3) then (img2-img3-img4) then (img3-img4-img5). (img11-img12-img1) auto scroll on mouseover i need it to be paused and mouseout it should continue.. Thanks in advance And -- View this message in context: http://old.nabble.com/how-to-multiple-images-slideshow-with-jquery-cycle-plugin-tp24540029s27240p26148900.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
Re: [jQuery] how to multiple images slideshow with jquery cycle plugin
I cannot get this working with the jquery cycle plugin. Can any show a full example of how to get multiple images to show in a row? IE: first 3 images --pause-- next 3 images I really don't want to load another plugin like Carousel. Thanks so much to anyone that can help :) malsup wrote: I'm looking for a same kind of solution. Sliding rows of 3 images at the same time. 9 visible images in 3 rows (1-3) (4-6) (7-9). Next slide will hide (1-3) and who (10-12). Anyone know how to do that? The way to do that with Cycle is to group the sets of images inside divs and treat the divs as slides. For example: div id=slideshow div /div div /div div /div /div -- View this message in context: http://old.nabble.com/how-to-multiple-images-slideshow-with-jquery-cycle-plugin-tp24540029s27240p26144933.html Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Cycle plugin issue in Safari Chrome
Hi. I have two Cycle slideshows on this page. The first shows exactly as expected. The second drops the bottom of the background image when the slides change. This happens in Webkit browsers (or at least Safari and Chrome) only. Any ideas why/ http://staging.pixelluxe.com/tt/child.html
[jQuery] Cycle plugin: using the addSlide option for multiple slideshows on the page?
I have a page that has 9 tabs of content, with each tab having its own
slideshow of about 8 images each. I was hoping to reduce the load
time of the page by only starting with two images per slideshow, and
then using the addSlide option to add the rest.
A few questions:
1. Is this the best way to go about speeding up the page load?
2. Is there an example somewhere of how to make this work? I used the
code from the demo on the http://jquery.malsup.com/cycle/add.html
page, and inserted some code of my own, but I obviously haven't
wrapped the correct functions with my code because I get *all* of the
images added to the first slideshow instead of to their own respective
slideshows. Here is my code with some of the redundant sections
removed:
$(function(){
$('.slideshowbox div[id]').cycle({ // 9 matches found
width: 539,
height: 225,
timeout: 5000,
speed: 1000,
before: onBefore
});
var slidesAdded = false;
function onBefore(curr, next, opts) {
// make sure we don't call addSlide before it is defined
if (!opts.addSlide || slidesAdded) return;
$('.slideshowbox div').each(function() { // for each slideshow
on
the page
var i = $(this).attr('id');
if(i == slideshow1) {
opts.addSlide('img
src=/storage/images/practical-3.jpg alt=
width=223 height=225 /');
opts.addSlide('img
src=/storage/images/practical-4.jpg alt=
width=234 height=225 /');
opts.addSlide('img
src=/storage/images/practical-5.jpg alt=
width=193 height=225 /');
opts.addSlide('img
src=/storage/images/practical-6.jpg alt=
width=246 height=225 /');
opts.addSlide('img
src=/storage/images/practical-7.jpg alt=
width=257 height=225 /');
}
else if(i == slideshow2) {
opts.addSlide('img
src=/storage/images/sensorial-3.jpg alt=
width=229 height=225 /');
opts.addSlide('img
src=/storage/images/sensorial-4.jpg alt=
width=231 height=225 /');
opts.addSlide('img
src=/storage/images/sensorial-5.jpg alt=
width=267 height=225 /');
opts.addSlide('img
src=/storage/images/sensorial-6.jpg alt=
width=279 height=225 /');
opts.addSlide('img
src=/storage/images/sensorial-7.jpg alt=
width=338 height=225 /');
}
etc...
else if(i == slideshow9) {
opts.addSlide('img
src=/storage/images/peace-3.jpg alt=
width=281 height=225 /');
opts.addSlide('img
src=/storage/images/peace-4.jpg alt=
width=287 height=225 /');
opts.addSlide('img
src=/storage/images/peace-5.jpg alt=
width=300 height=225 /');
opts.addSlide('img
src=/storage/images/peace-6.jpg alt=
width=319 height=225 /');
opts.addSlide('img
src=/storage/images/peace-7.jpg alt=
width=366 height=225 /');
}
});
slidesAdded = true;
};
});
Any advice would be helpful as I am a javascript/jquery novice.
Thanks!
-David
[jQuery] Cycle plugin: centering images of variable width?
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] 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.
I found a similar post in this group concerning that, but it didn't
work for me, though it did manage to remove the second set of pagers
(it was appearing twice, each one controlling one element). That
discussion is here:
http://groups.google.com/group/jquery-en/browse_thread/thread/0b8490d9c724ffc0
here's my code, I know it's a little tricky to understand. After cycle
handles hiding the multiple elements, it builds the blurb div, which
is nested within the header. If you have questions, feel free to ask.
script type=text/javascript
$.fn.cycle.defaults.timeout = 6000;
$(function() {
$('#headerContainer').after('div id=blurbContainer'+
'div class=blurb id=blurbHome/div'+
'div class=blurb id=blurbAbout/div'+
'div class=blurb id=blurbWork/div'+
'div class=blurb id=blurbClients/div'+
'div class=blurb id=blurbBlog/div'+
'div class=blurb id=blurbContact/div'+
'/div'+
'div id=nav').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
pager: '#nav'
});
});
$(function() {
$('#blurbContainer').cycle({
fx: 'scrollLeft',
speed: 'fast',
timeout: 0,
pager: '#nav',
pagerAnchorBuilder: function(idx, slide) {
return '#thumbNav a:eq(' + idx + ')';
}
});
});
/script
/head
body
div id=headerContainer
div class=header id=headerHome/div
div class=header id=headerAbout/div
div class=header id=headerWork/div
div class=header id=headerClients/div
div class=header id=headerContact/div
div class=header id=headerBlog/div
/div
div id=content/div
div id=footer/div
/body
/html
[jQuery] Cycle Plugin not working in IE - who can help?
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 href=mens-formal-hire.html
id=formal title=mens Formal HireMens Formal Hire/a/li
lia href=my-brides.html id=my-brides
title=My BridesMy Brides/a/li
lia href=events.html id=events
title=EventsEvents/a/li
lia href=contact.php id=contact
title=ContactContact/a/li
lia href=press.html id=press
title=PressPress/a/li
[jQuery] cycle plugin and dropdown menu
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: JQuery Cycle Plugin Random Timeout
Given that, how would you allocate a timeout for say the first 3
slides and then have the other slides all running at the default
timeout?
On Sep 9, 8:06 pm, Mike Alsup mal...@gmail.com wrote:
On Sep 8, 6:48 pm, Mike Alsup mal...@gmail.com wrote:
Hey thanks Mike, I got the random timeouts working, however all the
slideshows fade in at the same time on the first transition... is
there any way around that? Here is my code:
script type=text/javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1,
pause: '1',
random: '1',
timeoutFn: calculateTimeout
});
});
function calculateTimeout(numRand) {
var numRand = Math.floor(Math.random()*5000)+2000;
return numRand;
}
Hmmm, currently the first transition still respects the 'timeout'
option (which is in milliseconds). So you would need to randomize
that setting to achieve what you want. I will fix that bug so that
the first timeout also uses thetimeoutFn.
Mike
This is now supported correctly in v2.72.
Demo: http://www.malsup.com/jquery/cycle/timeout-random.html
Download:http://www.malsup.com/jquery/cycle/download.html
[jQuery] Re: JQuery Cycle Plugin Random Timeout
Given that, how would you allocate a timeout for say the first 3 slides and then have the other slides all running at the default timeout? Keep a counter and reference/update it in the timeoutFn. After 3 calls to the timeoutFn, return false thereafter.
[jQuery] JQuery cycle plugin bug(?) in firefox
Hi All, I've discovered some odd Firefox behaviour when using the JQuery cycle plugin. I'm simply trying to cycle through a few images. When you first visit the page, firefox fails to render the images correctly with the first overflowing it's container and the rest appearing as squashed thumbnails. When you refresh the page (but not shift+refresh) it all works fine. See http://www.thecathedraldeli.com/beta.html for an example. Has anyone come across this before? Any help would be much appreciated. Sidders Cycle PLugin v2.72 JQuery v1.3.2 FF v3.5.3
[jQuery] Re: JQuery cycle plugin bug(?) in firefox
When you first visit the page, firefox fails to render the images correctly with the first overflowing it's container and the rest appearing as squashed thumbnails. When you refresh the page (but not shift+refresh) it all works fine. Seehttp://www.thecathedraldeli.com/beta.html for an example. Your best bet is always to include width/height attributes on the images.
[jQuery] Re: JQuery Cycle Plugin Random Timeout
On Sep 8, 6:48 pm, Mike Alsup mal...@gmail.com wrote:
Hey thanks Mike, I got the random timeouts working, however all the
slideshows fade in at the same time on the first transition... is
there any way around that? Here is my code:
script type=text/javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1,
pause: '1',
random: '1',
timeoutFn: calculateTimeout
});
});
function calculateTimeout(numRand) {
var numRand = Math.floor(Math.random()*5000)+2000;
return numRand;
}
Hmmm, currently the first transition still respects the 'timeout'
option (which is in milliseconds). So you would need to randomize
that setting to achieve what you want. I will fix that bug so that
the first timeout also uses the timeoutFn.
Mike
This is now supported correctly in v2.72.
Demo: http://www.malsup.com/jquery/cycle/timeout-random.html
Download: http://www.malsup.com/jquery/cycle/download.html
[jQuery] JQuery Cycle Plugin Random Timeout
Hey, does anyone know how I can have the timeout change randomly for every slide? Thanks,
[jQuery] Re: JQuery Cycle Plugin Random Timeout
Hey, does anyone know how I can have the timeout change randomly for every slide? These demos might get you going in the right direction: http://www.malsup.com/jquery/cycle/timeout.html http://www.malsup.com/jquery/cycle/timeout2.html
[jQuery] Re: JQuery Cycle Plugin Random Timeout
Hey thanks Mike, I got the random timeouts working, however all the
slideshows fade in at the same time on the first transition... is
there any way around that? Here is my code:
script type=text/javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1,
pause: '1',
random: '1',
timeoutFn: calculateTimeout
});
});
function calculateTimeout(numRand) {
var numRand = Math.floor(Math.random()*5000)+2000;
return numRand;
}
/script
Also, here is a link to the site so you can see what's going on. Any
help would be much appreciated!
http://www.kinetichue.com/work
[jQuery] Re: JQuery Cycle Plugin Random Timeout
Hey thanks Mike, I got the random timeouts working, however all the
slideshows fade in at the same time on the first transition... is
there any way around that? Here is my code:
script type=text/javascript
$(document).ready(function() {
$('.slideshow').cycle({
fx: 'fade',
timeout: 1,
pause: '1',
random: '1',
timeoutFn: calculateTimeout
});
});
function calculateTimeout(numRand) {
var numRand = Math.floor(Math.random()*5000)+2000;
return numRand;
}
Hmmm, currently the first transition still respects the 'timeout'
option (which is in milliseconds). So you would need to randomize
that setting to achieve what you want. I will fix that bug so that
the first timeout also uses the timeoutFn.
Mike
[jQuery] Cycle Plugin - Pager and link to new page
I have got existing markup for my pager (see below).
How can i get the links working (got to the href-page) by clicking
on them? It does not work right now.. It seems, that the
pagerAnchorBulding prevents the default event?
Please help.
ul id=newsticker
lia href=1.htmimg src=a /h3header/h3/a/li
lia href=2.htmimg src=b /h3header/h3/a/li
...
/ul
using this cycle setup:
$('#slideshow').cycle({
fx: 'fade',
speed: 1000,
timeout: 3000,
pagerEvent: 'mouseover',
pager: '#newsticker',
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
return '#newsticker li:eq(' + (idx) + ') a ';
}
});
[jQuery] Cycle plugin creating links
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: how to multiple images slideshow with jquery cycle plugin
I'm looking for a same kind of solution. Sliding rows of 3 images at the same time. 9 visible images in 3 rows (1-3) (4-6) (7-9). Next slide will hide (1-3) and who (10-12). Anyone know how to do that? The way to do that with Cycle is to group the sets of images inside divs and treat the divs as slides. For example: div id=slideshow div img / img / img / /div div img / img / img / /div div img / img / img / /div /div
[jQuery] Cycle plugin: problem showing slide titles in pager (using pagerAnchorBuilder function)
Hi
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';
}
});
jQuery('#pause').click(function() {
jQuery('#cycle-pics').cycle('pause');
});
jQuery('#play').click(function() {
jQuery('#cycle-pics').cycle('resume', true);
});
});
The pagerAnchorBuilder function is correctly showing the slide
numbers, but not the titles.
Does anyone have any suggestions why this code isn't working? (I'm
using jQuery 1.3.2 and Cycle 2.71).
Thanks!
[jQuery] 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. Thanks!, - Kevin
[jQuery] cycle plugin questions
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] 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' another alternative i've considered is to make a cycle of cycles. Does anyone have an example of that?
[jQuery] Cycle Plugin Error in IE
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] jQuery Cycle Plugin - how to construct pagerAnchorBuilder relative to object being cycled
I have several sections on a page that have the same structure, a div
with information to cycle and a div with navigation. Each section has
the same classes and mark up, but varies with actual content.
What follows isn't exact, but similar markup:
div class=section
div class=verticalList ul.../ul/div
div class=serviceRight img / img / img / /div
/div
div class=section
div class=verticalList ul.../ul/div
div class=serviceRight img / img / img / /div
/div
I want to loop through each section and apply the same cycle pattern
via the jQuery cycle plugin. My code is as such:
$('.serviceRight').each(function() {
$(this).cycle({
fx: 'scrollHorz',
speed: 400,
timeout: 0,
pager: $(this).parent().find('.verticalList'),
pagerAnchorBuilder: function(idx, slide) {
// return sel string for existing anchor
//return $(this).parent().find('.verticalList
li:eq(' + idx + ') a');
return this.pager.find('.verticalList li:eq('
+ (idx) + ') a');
}
});
I'm having trouble constructing the pagerAnchorBuilder such that it's
relative to the section being cycled. I'm trying to keep the markup
for the section generic.
Any thoughts? Thanks.
[jQuery] Re: jQuery Cycle Plugin and Links
Hi there,
I am having a similar issue, but the functionality I want to achieve
is a bit simpler. Right now I want to apply a link of my choosing to
each slide (in the HTML of the slide), but t this breaks the alt
information pulled from the the pager and displays an undefined
error on the page. I don't quite know how to achieve this in the code.
This is a snippet of my pager code:
.after('div id=nav')
pager:'#nav',
pagerAnchorBuilder: function(idx, slide) {
var navlabel = $($(slide).html() +'img').attr('alt');
return 'spana href=#' + navlabel + '/a/span';
}
}
This is my current jQuery cycle HTML Code for each slide:
div class=cycler
div id=rotator
!-- slide 1 --
div class=slideimg src=image1.jpg width=400 height=120
alt=Alt Text for Pager /
div class=caption
h1a href=link-to-page.htmlTitle Headline/a/h1
pCaption Text and other HTML/p
/div/div
!-- /slide 1--
!-- slide 2 --
Same code as above but different image and caption content
!-- /slide 2 --
/div
/div
I want to manually add a custom href around the slide image src (like
the example code below) but it completely breaks it the pager
navigation and shows undefined error:
!-- slide --
div class=slide 1
a href =custom-link.htmlimg src=image.jpg width=400
height=120 alt=Alt Text for Pager //a
div class=caption
h1a href=link-to-page.htmlTitle Headline/a/h1
pCaption Text and other HTML/p
/div/div
!-- /slide 1 --
How can I do this?
Many thanks,
Danielle
On Jul 22, 8:35 am, Charlie charlie...@gmail.com wrote:
the details you want to display can also be contained elsewhere if you want
by using the index of the current slide to match the index of another set of
containers
function onAfter(curr, next, opts) {
var index = opts.currSlide;
// use index to refernece other containers to work with
}
thus you can hide a series of containers and display the ones you want on
each slide. Also can use the onBefore to hide, animate or whatever to remove
the info showing , let new slide show up, then add new info with onAfter
Mescalero wrote:Thanks guys, Using that, this is what i have: $(function() {
$('#slides').before('div id=nav class=nav').cycle({ fx: 'fade', speed:
'fast', timeout: 0, pager: '#nav', after: onAfter }); }); function onAfter()
{ $('#article-description').html(h3 + this.title + / h3)
.append('p' + this.alt + ' a href=' + this.link +'Read more ›/p'); }
and then in the body i have something like: img name=
src=images/features/botanical.jpg width=388 height=218 title=Botanical
Garden alt=Almost 300 acres, the botanical garden has miles of streams and
nature trails, display gardens, and flowers and plants.
link=http://www.scbg.com/ the only problem is that this.link is coming up
undefined. I am curious where i need to define it so that it will pick up the
link attribute like it does src and title. If i just put the link in the
unused 'name attribute and change to + this.name it also works, but that i
may want other attributes later down the road...does this make sense? Matt On
Jul 20, 7:07 pm, Mike Alsupmal...@gmail.comwrote:I would like to add
another attribute to the img tag called link.This attribute would define
where theimagewould link to if someone clicks theimage.Then i could do
something like: .append('p' + this.alt + ' a href=' + this.link +'Read
more ›/p');Does anyone know what/where i can add in thecyclejs to
accomodate for this.link?Check out the 'callbacks' example on this
page:http://www.malsup.com/jquery/cycle/int2.html
[jQuery] Re: how to multiple images slideshow with jquery cycle plugin
Hello, I'm looking for a same kind of solution. Sliding rows of 3 images at the same time. 9 visible images in 3 rows (1-3) (4-6) (7-9). Next slide will hide (1-3) and who (10-12). Anyone know how to do that? (Auto scroll and pause on hover is not a problem, that's all documented on: http://malsup.com/jquery/cycle) Thanks! On Jul 17, 3:54 pm, AND anildurug...@gmail.com wrote: Hi , i am new to jquery cycle plugin I would like to make a multiple images slideshow with jquery cycle plugin Say I have 12 images and I want to show 3 at a time and cycle through the 12 in this fashion: (img1-img2-img3) then (img2-img3-img4) then (img3-img4-img5). (img11-img12-img1) auto scroll on mouseover i need it to be paused and mouseout it should continue.. Thanks in advance And
[jQuery] Cycle plugin: Fill browser heigth and width with images
I'm using cycle to load images which work under the following css:
.bg {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 5000;
-ms-interpolation-mode: bicubic;
}
That make them look full browser in almost everycase.
Pictures must have a common screen correlation to fill the gap: 800 X 600,
1024 X 768 etc.
The problem is when proportions are not perfect, like 1024 X 683...
In this case it would be fantastic to resize the pic proportionally to fit
in the screen.
I just wonder where exactly in the cycle.plugin code should I place the
conditional:
if($(window).heigth() $(img).heigth())
{
//RESIZE THE PIC PROPORTIONALLY ETC...
}
--
View this message in context:
http://www.nabble.com/Cycle-plugin%3A-Fill-browser-heigth-and-width-with-images-tp24729038s27240p24729038.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
[jQuery] Re: jQuery Cycle Plugin and Links
the details you want to display can also be contained elsewhere if you
want by using the index of the current slide to match the index of
another set of containers
function onAfter(curr, next, opts) {
var index = opts.currSlide;
// use index to refernece other containers to work with
}
thus you can hide a series of containers and display the ones you want
on each slide. Also can use the onBefore to hide, animate or whatever
to remove the info showing , let new slide show up, then add new info
with onAfter
Mescalero wrote:
Thanks guys,
Using that, this is what i have:
$(function() {
$('#slides').before('div id="nav" class="nav"').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
after: onAfter
});
});
function onAfter() {
$('#article-description').html("h3" + this.title + "/
h3")
.append('p' + this.alt + ' a href=''Read
more /p');
}
and then in the body i have something like:
img name="" src="" width="388"
height="218" title="Botanical Garden" alt="Almost 300 acres, the
botanical garden has miles of streams and nature trails, display
gardens, and flowers and plants." link="http://www.scbg.com" /
the only problem is that this.link is coming up undefined. I am
curious where i need to define it so that it will pick up the link
attribute like it does "src" and "title." If i just put the link in
the unused 'name" attribute and change to + this.name it also works,
but that i may want other attributes later down the road...does this
make sense?
Matt
On Jul 20, 7:07pm, Mike Alsup mal...@gmail.com wrote:
I would like to add another attribute to the img tag called "link."
This attribute would define where the image would link to if someone
clicks the image.
Then i could do something like: .append('p' + this.alt + ' a href=''Read more /p');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
Check out the 'callbacks' example on this page:
http://www.malsup.com/jquery/cycle/int2.html
[jQuery] Cycle Plugin: Pause the cycle from link withing the cycling content?
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: jQuery Cycle Plugin and Links
Thanks guys,
Using that, this is what i have:
$(function() {
$('#slides').before('div id=nav class=nav').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
after: onAfter
});
});
function onAfter() {
$('#article-description').html(h3 + this.title + /
h3)
.append('p' + this.alt + ' a href=' + this.link +'Read
more ›/p');
}
and then in the body i have something like:
img name= src=images/features/botanical.jpg width=388
height=218 title=Botanical Garden alt=Almost 300 acres, the
botanical garden has miles of streams and nature trails, display
gardens, and flowers and plants. link=http://www.scbg.com; /
the only problem is that this.link is coming up undefined. I am
curious where i need to define it so that it will pick up the link
attribute like it does src and title. If i just put the link in
the unused 'name attribute and change to + this.name it also works,
but that i may want other attributes later down the road...does this
make sense?
Matt
On Jul 20, 7:07 pm, Mike Alsup mal...@gmail.com wrote:
I would like to add another attribute to the img tag called link.
This attribute would define where the image would link to if someone
clicks the image.
Then i could do something like: .append('p' + this.alt + ' a href='
+ this.link +'Read more ›/p');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
Check out the 'callbacks' example on this page:
http://www.malsup.com/jquery/cycle/int2.html
[jQuery] (Cycle Plugin) ScrollHorz problem in FF and Safari 3
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). After the cycle as occurred once, it doesn't do this again. So it's like it has something to do with the container being sized/resized the first time. Anyone see this kind of problem before?
[jQuery] jQuery Cycle Plugin and Links
I would like to add another attribute to the img tag called link.
This attribute would define where the image would link to if someone
clicks the image.
Then i could do something like: .append('p' + this.alt + ' a href='
+ this.link +'Read more ›/p');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
[jQuery] Re: jQuery Cycle Plugin and Links
you can use the "before" and "after" options in the API to write
functions that trigger on each slide to do what you want
Mescalero wrote:
I would like to add another attribute to the img tag called "link."
This attribute would define where the image would link to if someone
clicks the image.
Then i could do something like: .append('p' + this.alt + ' a href=''Read more /p');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
[jQuery] Re: jQuery Cycle Plugin and Links
I would like to add another attribute to the img tag called link.
This attribute would define where the image would link to if someone
clicks the image.
Then i could do something like: .append('p' + this.alt + ' a href='
+ this.link +'Read more ›/p');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
Check out the 'callbacks' example on this page:
http://www.malsup.com/jquery/cycle/int2.html
[jQuery] how to multiple images slideshow with jquery cycle plugin
Hi , i am new to jquery cycle plugin I would like to make a multiple images slideshow with jquery cycle plugin Say I have 12 images and I want to show 3 at a time and cycle through the 12 in this fashion: (img1-img2-img3) then (img2-img3-img4) then (img3-img4-img5). (img11-img12-img1) auto scroll on mouseover i need it to be paused and mouseout it should continue.. Thanks in advance And
[jQuery] Cycle Plugin ScrollHorz effect problem in FF
I'm using the Cycle plugin and really like the scrollHorz transition effect since it scrolls left/right appropriately when using the pager navigation. But I'm having a strange problem with the very first transition when viewed in FireFox (v 3.0.11 on Mac as well as 3.0.11 on WinXP). You can see the page here: http://tinyurl.com/mmddkn The main content to the right of the vertical image on the left side of the page is what is being animated. If you click Begin at the bottom right of that content, or click on any of the white words/links on the image (Strategy, Requirements, etc.), the first time it cycles, the content of the first slide squishes vertically as it scrolls left, resulting in it overlapping the content of the incoming slide. Every time after that, though, it behaves as it should and is just pushed off the side of the section, without and distortion. I've tried setting a height for the div containing the content, but that didn't work. Again, it only happens the very first time the scrollHorz is triggered for the very first slide. Anyone have any thoughts? Thanks! - John
[jQuery] Cycle Plugin Typewriter effect
Hey, The cycle plugin is fantastic. I love using it, but would like to know if there's a typewriter effect for the transitions in order to build a news ticker using it. See here for typewriter effect: http://www.hungry-media.com/code/jQuery/tickerType/ Or, would anyone know how to create an effect like this for use with the cycle plugin? Thanks, Dave
[jQuery] Re: jQuery cycle plugin pager not working in FF and Safari
I am having an odd error where the pager generates links but they
don't change the slide in FF and Safari. The biggest surprise of all
is that it actually works in IE.
Here is the page I am referring to:http://76.12.208.222/
Try this:
#slideshowPage { position: relative: z-index: 100; }
[jQuery] Re: jQuery cycle plugin pager not working in FF and Safari
Thanks! Problem solved. It is always the simple things. I appreciate
the help.
On Jul 1, 8:54 am, Mike Alsup mal...@gmail.com wrote:
I am having an odd error where the pager generates links but they
don't change the slide in FF and Safari. The biggest surprise of all
is that it actually works in IE.
Here is the page I am referring to:http://76.12.208.222/
Try this:
#slideshowPage { position: relative: z-index: 100; }
[jQuery] jQuery cycle plugin pager not working in FF and Safari
I am having an odd error where the pager generates links but they don't change the slide in FF and Safari. The biggest surprise of all is that it actually works in IE. Here is the page I am referring to: http://76.12.208.222/ Any suggestions?
[jQuery] Cycle Plugin Help - Image Anchors
Is it possible to use image rollovers instead of the default text that comes with the plugin?
[jQuery] Cycle Plugin Help - Image Anchors
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] jQuery Cycle Plugin precode is appearing inside DIV's
I'm using DIV's and I can't figure out how to remove the html text from the inside DIV from the last slide. I've tried everything. When I remove the precode outside the DIV, the script won't work!! http://www.enaturalskin.com The Main Banner. Erik
[jQuery] Re: JQuery Cycle Plugin Problems with IE7
slideExpr: null,
Trailing commas in arrays cause JavaScript errors in IE. Please
enable debugging in your browser so that you can see these errors
reported on the status bar.
On Jun 8, 8:00 am, buschii mailsvomha...@web.de wrote:
Hi folks,
I am new here and I seached vor problems with IE7 and JQuery Cycle
Plugin but haven't found anything helpful for me.
My problem: I almost copied the demo skript
fromhttp://malsup.com/jquery/cycle/
and changed it to my local folders using Dreamweaver (not laughing, I
am not a professional programmer).
In Dreamweaver live-view it works perfekt. So it does in Mozilla and
Opera. But not in IE.
There I can just see my 3 test-pictures beneath each other but no
funktionality.
Has anyone an idea?
Karsten
P.S. my code:
script type=text/javascript src=jquery.js/script /*latest
version*/
script type=text/javascript src=jquery.cycle.lite.js/script /
*I also tried jquery.cycle.all.js*/
script type=text/javascript
$(function() {
$('#slideshow1').cycle({
timeout: 4000, // milliseconds between slide transitions (0
to disable auto advance)
speed: 1000, // speed of the transition (any valid fx
speed value)
next: null, // id of element to use as click trigger for
next slide
prev: null, // id of element to use as click trigger for
previous slide
before: null, // transition callback (scope set to element
to be shown)
after: null, // transition callback (scope set to element
that was shown)
height: 'auto', // container height
sync: 1, // true if in/out transitions should occur
simultaneously
fit: 0, // force slides to fit container
pause: 0, // true to enable pause on hover
delay: 0, // additional delay (in ms) for first
transition (hint: can be negative)
slideExpr: null, // expression for selecting slides (if
something other than all children is required)});
});
/script
style type=text/css
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
/style
/head
body
div id=slideshow1 class=pics
img src=bild_1.jpg width=200 height=200 /
img src=bild_2.jpg width=200 height=200 /
img src=bild_3.jpg width=200 height=200 /
/div
/body
[jQuery] Re: JQuery Cycle Plugin Problems with IE7
I am having the exact same issue.
On firefox and safari the cycle woks fine.
In ie7 the images are displayed beneath each other.
I hope someone will reply :)
Cheers, Robert
On 8 jun, 14:00, buschii mailsvomha...@web.de wrote:
Hi folks,
I am new here and I seached vor problems with IE7 and JQuery Cycle
Plugin but haven't found anything helpful for me.
My problem: I almost copied the demo skript
fromhttp://malsup.com/jquery/cycle/
and changed it to my local folders using Dreamweaver (not laughing, I
am not a professional programmer).
In Dreamweaver live-view it works perfekt. So it does in Mozilla and
Opera. But not in IE.
There I can just see my 3 test-pictures beneath each other but no
funktionality.
Has anyone an idea?
Karsten
P.S. my code:
script type=text/javascript src=jquery.js/script /*latest
version*/
script type=text/javascript src=jquery.cycle.lite.js/script /
*I also tried jquery.cycle.all.js*/
script type=text/javascript
$(function() {
$('#slideshow1').cycle({
timeout: 4000, // milliseconds between slide transitions (0
to disable auto advance)
speed: 1000, // speed of the transition (any valid fx
speed value)
next: null, // id of element to use as click trigger for
next slide
prev: null, // id of element to use as click trigger for
previous slide
before: null, // transition callback (scope set to element
to be shown)
after: null, // transition callback (scope set to element
that was shown)
height: 'auto', // container height
sync: 1, // true if in/out transitions should occur
simultaneously
fit: 0, // force slides to fit container
pause: 0, // true to enable pause on hover
delay: 0, // additional delay (in ms) for first
transition (hint: can be negative)
slideExpr: null, // expression for selecting slides (if
something other than all children is required)});
});
/script
style type=text/css
.pics {
height: 232px;
width: 232px;
padding: 0;
margin: 0;}
.pics img {
padding: 15px;
border: 1px solid #ccc;
background-color: #eee;
width: 200px;
height: 200px;
top: 0;
left: 0
}
/style
/head
body
div id=slideshow1 class=pics
img src=bild_1.jpg width=200 height=200 /
img src=bild_2.jpg width=200 height=200 /
img src=bild_3.jpg width=200 height=200 /
/div
/body
[jQuery] cycle plugin pagerAnchorBuilder
Dear all,
I've worked out that the pagerAnchorBuilder option will probably get
me what I'm trying for, but I'm trying to add a wrinkle.
I've got a slide show using next/prev, but I also want the user to be
able to click on links in ullis to go to specific images in the
slide collection.
the image collection looks something 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
and the links list like this:
ul
lia href=#Foo text/a/li
lia href=#Bar text/a/li
lia href=#Baz text/a/li
/ul
I'd like the user to be able to click on Foo text and fade in 1.jpg,
Bar text to fade in 3.jpg, and on Baz text to fade in 5.jpg. Could
I add an attribute to the anchors that would feed the necessary index
to the pagerAnchorBuilder?
currently in the cycle options object :
pagerAnchorBuilder: function(idx, slide) {
return '#clientList li:eq(' + (idx) + ') a';
}
this works fine and it doesn't disrupt the prev/next cycle, but it
just cycles 1.jpg, 2.jpg, 3.jpg
Any suggestions?
Jon
[jQuery] 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. How is possible to do this? Thank you!
[jQuery] Cycle Plugin not working in Chrome Safari - Tests fine in IE 6, 7, and FF.
Hi, I'm using the Cycle plugin to rotate four images inside of a div. It works beautifully in IE6, IE7, and Firefox. However, in Chrome and Safari, none of the images rotate or hide themselves as they should - all four of them can be seen stacked atop each other. http://www.helpcomingyourway.org/index.php - Cycle in action (open in Chrome or Safari to see bug). Any ideas? If I can't get this fixed, I may have to apply a clipping declaration to the div and go without, but I'd rather not do that. Ashley
[jQuery] Re: jQuery cycle plugin help
I have been using jQuery cycle plugin for a banned with some content that fades in and out in a slideshow sort of thing but I would like to be able to div individually. Rather than saying all instances of #projects become a slide, i would like #project_img, #project_title and #project_description to all be separate, yet i want them all to be look like theyre in sync. I would also want the pause on hover to work for the entire parent div #projects so each div stops fading in/out. If anyone took the time to read that rant, make any sense out of it and can help me out i really appreciate it. You can choose specific elements to be slides rather than all children of the container: http://www.malsup.com/jquery/cycle/slideExpr.html
[jQuery] jQuery cycle plugin help
I have been using jQuery cycle plugin for a banned with some content that fades in and out in a slideshow sort of thing but I would like to be able to div individually. Rather than saying all instances of #projects become a slide, i would like #project_img, #project_title and #project_description to all be separate, yet i want them all to be look like theyre in sync. I would also want the pause on hover to work for the entire parent div #projects so each div stops fading in/out. If anyone took the time to read that rant, make any sense out of it and can help me out i really appreciate it.
[jQuery] Cycle Plugin Questions
Hi all. I am a newbie to jquery as well as the Cycle plug in. I initally have 2 questions. First, can I utilize the prev and next options along with the pager option, so that someone can have both options of clicking prev/next and or click on one of the pagers. And second, can I have a Cycle slide show within another Cycle slide show. The reason for question 2 is that I am a graphic designer and I want to use Cycle to show my portfolio. There are some instances where I would like to give the viewer the option to see additional detailed images of a particular portfolio item, and at the same time not force someone to have to go through each and every image in the portfolio.
[jQuery] Cycle Plugin and Wordpress not playing nice
http://www.ltdmag.com/hometest/ If you view the above URL the TEST IMAGE at the top is actually a custom field image for 3 blog posts. the HTML seems to be formatted correctly and my cycle plugin also seems to be called and formatted correctly. I have disabled ALL plugins as well, and tested to no avail. Any ideas? Thanks so much for your feedback.
[jQuery] Cycle Plugin and Wordpress not playing nice
http://www.ltdmag.com/hometest/ If you view the above URL the TEST IMAGE at the top is actually a custom field image for 3 blog posts. the HTML seems to be formatted correctly and my cycle plugin also seems to be called and formatted correctly. I have disabled ALL plugins as well, and tested to no avail. Any ideas? Thanks so much for your feedback.
[jQuery] cycle plugin image positioning issue
I am creating a single column fluid layout and have run into an issue when positioning the images I display via Mike Alsup's cycle plugin. I dynamically load a content DIV with three other DIVs, one of which is controlled by the cycle plugin. The other two DIVs are positioned as expected, however the DIV that cycle is handling has positioning CSS added to it inline that is pulling it out of my page flow. (When I disable the cycle code the single image I load first displays as expected.) Here is the code from that particular DIV: [start code] div id=content div style=position: relative; id=featuredImage img style=position: absolute; top: 0px; left: 0px; display: block; z-index: 5; opacity: 1; src=/images/riverShotWithFisherman.jpg alt=River scene with fisherman img style=position: absolute; top: 0px; left: 0px; display: none; z-index: 4; opacity: 0; src=/images/3BuiltNReady2.jpg img style=position: absolute; top: 0px; left: 0px; display: none; z-index: 3; opacity: 0; src=/images/waterfall2009.jpg img style=position: absolute; top: 0px; left: 0px; display: none; z-index: 2; opacity: 0; src=/images/FCBlueTrain.jpg img style=position: absolute; top: 0px; left: 0px; display: none; z-index: 1; opacity: 0; src=/images/FCFallTrain.jpg /div div id=fp img src=/images/fp.gif alt=Featured Product /div div id=totm img src=/images/totm.gif alt=Tip of the Month /div p id=blurb Company Info /p /div [end code] How do I eliminate or override the position: absolute; being injected into the img tag, as that appears to be the culprit? I tried applying other CSS to the content wrapper DIV, but to no avail. Sorry I can't post a link, as the page is currently on my intranet beta server. Thanks, Laker
[jQuery] Re: jQuery Cycle Plugin - Prev/Nex inside loop container
2009/6/3 Arie thomasa...@gmail.com:
Hello,
I tried to use Cycle Plugin, and it works great. I have the Previous
and Next navigation work without any problem.
This is the code I have:
-
script type=text/javascript
$(function() {
$('#feat-container').cycle({
prev: '#prev',
next: '#next',
timeout: 8000, // milliseconds between slide transitions (0 to
disable auto advance)
speed: 2000, // speed of the transition (any valid fx speed value)
delay: 0
});
});
/script
div class=feat-container
div class=featloop
pAenean lacinia mi et odio scelerisque at ultricies tortor mattis.
Nullam sit amet mauris velit, a tincidunt purus./p
/div
div class=featloop
pNam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
eget ipsum./p
/div
div class=featloop
pPellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas/p
/div
/div
div class=featnava id=prev href=#img src=prev.gif alt= /
/aa id=next href=#img src=next.gif alt= //aa href=/
link/to/archives/img src=more.gif alt= //a/div
-
Now, how to have the previous and next inside the container? So, on
each item, there should be a link to next/prev item?
Thank you!
regards,
Arie
Sorry, I think I need to update my question.
From what I've posted, I want to have something like this in the HTML.
--
div class=feat-container
div class=featloop
pAenean lacinia mi et odio scelerisque at ultricies tortor mattis.
Nullam sit amet mauris velit, a tincidunt purus./p
div class=featnava id=prev href=#img src=prev.gif alt= /
/aa id=next href=#img src=next.gif alt= //aa href=/
link/to/archives/img src=more.gif alt= //a/div
/div
div class=featloop
pNam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
eget ipsum./p
div class=featnava id=prev href=#img src=prev.gif alt= /
/aa id=next href=#img src=next.gif alt= //aa href=/
link/to/archives/img src=more.gif alt= //a/div
/div
div class=featloop
pPellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas/p
div class=featnava id=prev href=#img src=prev.gif alt= /
/aa id=next href=#img src=next.gif alt= //aa href=/
link/to/archives/img src=more.gif alt= //a/div
/div
/div
So, in every item, there are navigation to next and previous page. If
there are few things to modify in the script or HTML, which one?
Thank you...
regards,
Arie
[jQuery] jQuery Cycle Plugin - Prev/Nex inside loop container
Hello,
I tried to use Cycle Plugin, and it works great. I have the Previous
and Next navigation work without any problem.
This is the code I have:
-
script type=text/javascript
$(function() {
$('#feat-container').cycle({
prev: '#prev',
next: '#next',
timeout: 8000, // milliseconds between slide transitions (0 to
disable auto advance)
speed: 2000, // speed of the transition (any valid fx speed value)
delay: 0
});
});
/script
div class=feat-container
div class=featloop
pAenean lacinia mi et odio scelerisque at ultricies tortor mattis.
Nullam sit amet mauris velit, a tincidunt purus./p
/div
div class=featloop
pNam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
eget ipsum./p
/div
div class=featloop
pPellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas/p
/div
/div
div class=featnava id=prev href=#img src=prev.gif alt= /
/aa id=next href=#img src=next.gif alt= //aa href=/
link/to/archives/img src=more.gif alt= //a/div
-
Now, how to have the previous and next inside the container? So, on
each item, there should be a link to next/prev item?
Thank you!
regards,
Arie
[jQuery] JQuery Cycle Plugin, all images in pool showing up when page loads
I'm trying this Cycle Plugin, but whenever I load, lets say I have 5 images in the rotation pool, they all show up (briefly) whenever the page reloads, and then they dissapear (starting the rotation). Is there any way to avoid this? The images I'm using are 960 x 220, so it pretty much fills the screen before it hides.
[jQuery] Re: JQuery Cycle Plugin, all images in pool showing up when page loads
Found how how to do it:
.pics {
width: 960px;
height: 220px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
}
.pics img {
width: 960px;
height: 220px;
}
overflow: hidden did the trick. Thanks!
On Jun 1, 1:27 pm, Adrian Chen ac...@mac.com wrote:
Use CSS to control the initial display of the images.
How would that be done? Right now this is what I'm using
.pics {
height: 220px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.pics img {
width: 960px;
height: 220px;
}
[jQuery] Re: JQuery Cycle Plugin, all images in pool showing up when page loads
On Jun 1, 2009, at 2:27 PM, Adrian Chen wrote:
Use CSS to control the initial display of the images.
How would that be done? Right now this is what I'm using
.pics {
height: 220px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.pics img {
width: 960px;
height: 220px;
}
Hi Adrien,
Try it with two additional declarations:
.pics {
position: relative;
height: 220px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.pics img {
position: absolute;
width: 960px;
height: 220px;
}
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] Re: JQuery Cycle Plugin, all images in pool showing up when page loads
Oops. Sorry I misspelled your name, Adrian.
--Karl
On Jun 1, 2009, at 3:58 PM, Karl Swedberg wrote:
On Jun 1, 2009, at 2:27 PM, Adrian Chen wrote:
Use CSS to control the initial display of the images.
How would that be done? Right now this is what I'm using
.pics {
height: 220px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.pics img {
width: 960px;
height: 220px;
}
Hi Adrien,
Try it with two additional declarations:
.pics {
position: relative;
height: 220px;
width: 960px;
margin-left: auto;
margin-right: auto;
}
.pics img {
position: absolute;
width: 960px;
height: 220px;
}
--Karl
Karl Swedberg
www.englishrules.com
www.learningjquery.com
[jQuery] cycle plugin issue
ok i cant get the easing plugin to work with cycle plugin
1. does cycle 2.65 work with easing 1.3
2. does easing work on the scrollHorz
3. if both of these are true then what am i doing wrong
$('#slideshow').cycle({
fx: 'scrollHorz',
timeout: 0,
speed:1000,
prev:'#prev2',
next:'#next2',
easingIn: 'easeOutCubic',
easingOut : 'easeInBack'
[jQuery] jQuery Cycle Plugin: Implement Pager on existing navigation anchors
I have a problem with implementing the pager in the Cycle plugin. I
have an existing navigational structure, which is actually a playlist
- each link launches a new media file in an instance of flowplayer
[http://www.flowplayer.org]. I want to use each of these anchors to,
in addition, page another div block which has descriptions of the
media.
By default, the cycle plugin ADDS new anchors below my existing ones,
in the default format - a class= href=#1/a.
I would like cycle to use my existing anchors, so that a single click
starts a new media file in flowplayer, and also changes the
description DIV to display the relevant description.
Here is my script for cycle:
script type=text/javascript
$('.clips2')
.before('div class=halfLeft')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
/script
Here is the playlist HTML:
div class=clips id=nav
a href=[*mediaPlayer1*] title=[*mediaPlayer1Title*]span
class=trackNo1.nbsp;/span[*mediaPlayer1Title*]/a
a href=[*mediaPlayer2*] title=[*mediaPlayer2Title*]span
class=trackNo2.nbsp;/span[*mediaPlayer2Title*]/a
a href=[*mediaPlayer3*] title=[*mediaPlayer3Title*]span
class=trackNo3.nbsp;/span[*mediaPlayer3Title*]/a
a href=[*mediaPlayer4*] title=[*mediaPlayer4Title*]span
class=trackNo4.nbsp;/span[*mediaPlayer4Title*]/a
a href=[*mediaPlayer5*] title=[*mediaPlayer5Title*]span
class=trackNo5.nbsp;/span[*mediaPlayer5Title*]/a
a href=[*mediaPlayer6*] title=[*mediaPlayer6Title*]span
class=trackNo6.nbsp;/span[*mediaPlayer6Title*]/a
a href=[*mediaPlayer7*] title=[*mediaPlayer7Title*]span
class=trackNo7.nbsp;/span[*mediaPlayer7Title*]/a
a href=[*mediaPlayer8*] title=[*mediaPlayer8Title*]span
class=trackNo8.nbsp;/span[*mediaPlayer8Title*]/a
/div
Here is the div with the media descriptions:
div class=row
div class=descriptions left
div class=clips2
[*mediaPlayer1Text*]
[*mediaPlayer2Text*]
[*mediaPlayer3Text*]
[*mediaPlayer4Text*]
[*mediaPlayer5Text*]
[*mediaPlayer6Text*]
[*mediaPlayer7Text*]
[*mediaPlayer8Text*]
/div
/div
/div
Can anyone help?
Thanks.
[jQuery] Re: jQuery Cycle Plugin: Implement Pager on existing navigation anchors
I would like cycle to use my existing anchors These demos show how to use existing markup for the pager links: http://www.malsup.com/jquery/cycle/pager3.html http://www.malsup.com/jquery/cycle/pager4.html
[jQuery] cycle plugin image smallen itselft
Hi, I have used cycle plugin for one of my website, sometime images get small unpectedly, although all image has been photoshoped to fixed same size Wonder is there any known bug about image resizing itself like that ?
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Just to clarify; I have two slide shows using the cycle plugin. They are both set to display using the same css. Only one should display at a time, I want the page to load with one shown and the other hidden, then after a link is clicked the slide shows should toggle to display the previously hidden and hide the previously shown. All this is strait forward jQuery nothing difficult so I'm not bothering to clutter this thread with the obvious code. The problem is that the previously hidden cycle slide show will not display as it should. I just get a blank space where it should be. The Cycle plug in page says to direct questions to this group so, I'm asking for help. Do I have to restart the plugin somehow? Or... ? Thanks in advance for any help or suggestions. Can you post a link to your test page?
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Ok, http://mid-awe.com/webs/presidential/index.html I'm noticing also now that an additional #s2 slide show is missing from the initial page load. I'll look at that to see if the issues are related. Any help is greatly appreciated. Can you post a link to your test page?
[jQuery] Re: jQuery Cycle plugin (help show/hide slide shows on same page)?
Ok, I think I've got it.
I am now setting up the second slide show at the click event and then
showing it immediately following. Like this:
[code]jQuery('#buttons [href]').click(
function(){
var element = jQuery(this);
var href=element.attr(href);
jQuery('#screed').html($(href).html());
arrowFadr();
if (href == #about){
//$('#s1,#s2').hide();
$('#s3').cycle({
fx: 'all',
timeout: 1,
easing: 'easeOutExpo',
delay: -2000,
next: '#s3',
pause: 1,
speed: 1000
});
$('#s4').cycle({
fx:
'blindX,fadeZoom,scrollLeft,scrollHorz,slideX,toss,turnLeft',
timeout: 1,
easing: 'easeOutExpo',
pause: 1,
speed: 1000
});
jQuery('#s3').show();
jQuery('#s4').show();
};
});[/code]
you can see the live example @ the link I posted above.
But, This brings up another issue. the overlaying cycle slide shows
work with Web-kit browsers but no others? what am I doing wrong?
jQuery should be compatible with the slew. Can you see any reason why
it displays for a few slides and then vanishes (never to be seen
again)?
Thanks again for any help.
[jQuery] Cycle plugin and print styles
Hello 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? Many thanks Martin.
[jQuery] jQuery Cycle plugin (help show/hide slide shows on same page)?
Hi all, I'm trying to setup multiple cycle slide shows on the same page; Only they occupy the same space on the page. So, I'm trying to hide the second slide show right away (no problem showing the first automatically), but when I attempt to hide the first and show the second, nothing happens. Is it even possible? or.. am I needing to find another way to do it? Thanks
