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.
$.fn.cycle.defaults.timeout = 6000;
$(function() {
$('#headerContainer').after(''+
'
'+
'
'+
'
'+
'
'+
'
'+
'
'+
'
'+
'').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 + ')';
}
});
});
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
--
http://www.w3.org/1999/xhtml"; xml:lang="en" lang="en">
Wedding Dresses ~ Cavendish Bridal House
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();});
$(document).ready(function() {
$('#wedding-dresses').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
next: '#next',
prev: '#prev' ,
});
});
Cavendish Bridal House Hayfield
Home
Georgia
The Shop
Your Dress
What to expect
Ordering your
dress
Alterations
Collections
Dresses
Wedding Dresses
Bridesmaid Dresses
Prom Dresses
Accessories
Mens Formal Hire
My Brides
Events
Contact
Press
Links
Prev Next
Felice
Felice is an extraordinary strapless slim A-line gown
made of lavish lace. It features a ruched Empire bust line ornamented
with hand-beaded embellishment, asymmetrical side draped midriff and
functional corset back with a chapel train..
Georgia Recommends
Embroided Slat Swirl Waistcoat
Necklace
Julianne
Crafted from taffeta, extraordinary strapless A-line
gown, Julianne features a crisscross woven bodice embellished with
delicate hand-beaded and embroidered appliqués. Julianne’s functional
corset back, A-line skirt and embellished chapel train create an
exquisite look.
Georgia Recommends
Black Quill Waiscoat
Lady Bridal Shoes
Renee
This alluring sequined lace over luxurious satin
strapless ball gown features a crisscross sweetheart neckline enhanced
with a lavish hand-beaded Empire waistline. The feminine sequined
lace gathers at the hip and flows down the chapel length train from
the functional corset back.
Georgia Recommends
Champagne Quill Waistcoat
Ivory Pearl Earrings
Susanne
The elegance of Susanne is revealed through a uniquely
A-line silhouette. The asymmetrical draped bodice features a strapless
sweetheart neckline and is detailed with hand-beaded lace motifs.
Susanne also includes a functional corset back with a chapel train.
Georgia Recommends
Mellow Bridal Shoes.
Diamante Pearl Earrings
Emilie
This imperial two-piece straples
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
> 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.
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 wrote:
> On Sep 8, 6:48 pm, Mike Alsup 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:
>
> > >
> 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.
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
On Sep 8, 6:48 pm, Mike Alsup 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:
>
> >
> 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:
>
>
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:
$(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;
}
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
> 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
Hey, does anyone know how I can have the timeout change randomly for
every slide?
Thanks,
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.
header
header
...
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 ';
}
});
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.
> 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:
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 ''+(idx+1)+' '+ slide.title +'';
}
});
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!
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
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
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?
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:
...
...
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.
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:
$(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>';
};
});
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.
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('')
pager:'#nav',
pagerAnchorBuilder: function(idx, slide) {
var navlabel = $($(slide).html() +'img').attr('alt');
return '' + navlabel + '';
}
}
This is my current jQuery cycle HTML Code for each slide:
Title Headline
Caption Text and other HTML
Same code as above but different image and caption content
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:
Title Headline
Caption Text and other HTML
How can I do this?
Many thanks,
Danielle
On Jul 22, 8:35 am, Charlie 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('').cycle({ fx: 'fade', speed:
> 'fast', timeout: 0, pager: '#nav', after: onAfter }); }); function onAfter()
> { $('#article-description').html("" + this.title + "")
> .append('' + this.alt + ' Read more ›'); }
> and then in the body i have something like: 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 Alsupwrote: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('' + this.alt + ' Read
> more ›');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
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 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
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.
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('').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
after: onAfter
});
});
function onAfter() {
$('#article-description').html("" + this.title + "")
.append('' + this.alt + ' Read
more ›');
}
and then in the body i have something like:
"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 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('' + this.alt + ' Read more ›');
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
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?
Thanks guys,
Using that, this is what i have:
$(function() {
$('#slides').before('').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
pager: '#nav',
after: onAfter
});
});
function onAfter() {
$('#article-description').html("" + this.title + "")
.append('' + this.alt + ' Read
more ›');
}
and then in the body i have something like:
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 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('' + this.alt + ' Read more ›');
>
> > 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
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(
''
).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');
});
}
> 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('' + this.alt + ' Read more ›');
>
> 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
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('' + this.alt + ' Read more ›');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
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('' + this.alt + ' Read more ›');
Does anyone know what/where i can add in the cycle js to accomodate
for this.link?
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
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
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
Thanks! Problem solved. It is always the simple things. I appreciate
the help.
On Jul 1, 8:54 am, Mike Alsup 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; }
> 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; }
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?
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
Is it possible to use image rollovers instead of the default text that
comes with the plugin?
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 outside the DIV, the script won't work!!
http://www.enaturalskin.com
The Main Banner.
Erik
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 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:
>
> /*latest
> version*/
> /
> *I also tried jquery.cycle.all.js*/
>
>
> $(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)});
> });
>
>
>
>
> .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
>
> }
>
>
>
>
>
>
>
>
>
>
>
>
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 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:
>
> /*latest
> version*/
> /
> *I also tried jquery.cycle.all.js*/
>
>
> $(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)});
> });
>
>
>
>
> .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
>
> }
>
>
>
>
>
>
>
>
>
>
>
>
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 s to go to specific images in the
slide collection.
the image collection looks something like this:
and the links list like this:
Foo text
Bar text
Baz text
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
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
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!
> 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
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.
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.
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.
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.
2009/6/3 Arie :
>
> 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:
>
> -
>
> $(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
> });
> });
>
>
>
>
>
> Aenean lacinia mi et odio scelerisque at ultricies tortor mattis.
> Nullam sit amet mauris velit, a tincidunt purus.
>
>
>
> Nam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
> interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
> eget ipsum.
>
>
>
> Pellentesque habitant morbi tristique senectus et netus et
> malesuada fames ac turpis egestas
>
>
>
>
> >
> -
>
> 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.
--
Aenean lacinia mi et odio scelerisque at ultricies tortor mattis.
Nullam sit amet mauris velit, a tincidunt purus.
Nam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
eget ipsum.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas
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
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]
Company Info
[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
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:
-
$(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
});
});
Aenean lacinia mi et odio scelerisque at ultricies tortor mattis.
Nullam sit amet mauris velit, a tincidunt purus.
Nam fringilla aliquam vehicula. Vivamus ultricies, lacus eget
interdum rhoncus, ligula metus tempor arcu, eget volutpat nibh dolor
eget ipsum.
Pellentesque habitant morbi tristique senectus et netus et
malesuada fames ac turpis egestas
-
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
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'
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
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
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 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;
>
> }
> 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;
}
> 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.
Use CSS to control the initial display of the images.
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.
> 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
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 - 1.
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:
$('.clips2')
.before('')
.cycle({
fx: 'turnDown',
speed: 'fast',
timeout: 0,
pager: '#nav'
});
Here is the playlist HTML:
1. [*mediaPlayer1Title*]
2. [*mediaPlayer2Title*]
3. [*mediaPlayer3Title*]
4. [*mediaPlayer4Title*]
5. [*mediaPlayer5Title*]
6. [*mediaPlayer6Title*]
7. [*mediaPlayer7Title*]
8. [*mediaPlayer8Title*]
Here is the div with the media descriptions:
[*mediaPlayer1Text*]
[*mediaPlayer2Text*]
[*mediaPlayer3Text*]
[*mediaPlayer4Text*]
[*mediaPlayer5Text*]
[*mediaPlayer6Text*]
[*mediaPlayer7Text*]
[*mediaPlayer8Text*]
Can anyone help?
Thanks.
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 ?
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.
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?
> 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?
1 - 100 of 418 matches
Mail list logo