JQuery :: Different FX Between Pager And Next / Prev Slide Toggles
Dec 20, 2011
I have a slideshow similar (albeit more sophisticated) to this example [URL]. However, I'm trying to make the slideshow accessible to all JAWS users, leveraging aria-live attributes appropriately.
The problem is this: I am using the fx: 'fade' transition (this is out in the wild and I'm unable to change it at this point). However, I have a hidden button that gains visibility on tab focus. When the 'next' button is triggered I need the cycle plugin to leverage NO fx at all or the screen readers will end up using the subsequent slide for reading content due to the opacity + display time delay with the fade fx.
Basically I want my slideshow to have 2 fx, one for the default behavior (fx: 'fade' for the pager links) which is fading from slide to slide, and another fx (fx: 'none') that is used to prevent aria-live issues with screen readers. Is this possible?
View 3 Replies
ADVERTISEMENT
Sep 13, 2011
Im using the goto function for a questionnaire to go to different slides/questions, i also want to add a back/prev button but i want it to go back to the previous slide it was on instead of going back to the prev slide in the stacking order.
View 4 Replies
View Related
Dec 12, 2011
I have two questions regarding JQuery Cycle
How to add 'slideHorz' transition and 'pager' options in JQuery Cycle Lite?I don't want to use the full version of JQuery Cycle because it would be too much for my purpose.
Also,Is that possible to use our own thumbnail as the anchor?
View 3 Replies
View Related
Jun 10, 2010
I have re-styled the tabs of the pager with css so its not orange anymore. Instead the active and the inactive tabs have a background image. What I need to do now is remove the numbers, but I do not know how to. Can someone please tell me how to do so?
View 8 Replies
View Related
Jun 25, 2010
Am I missing something here? I want to be able to have more than just one button to toggle the drop function with different content. I'm using the test code below to set this up. Works fine if just using "btn" and "btndiv" but nothing happens when I add "btn2" and "btn2div":
[Code]...
View 4 Replies
View Related
Feb 2, 2011
I'm having a little trouble with 2 differentJS scripts. I have a drop down slide menu and a parralex slide gallery. Both work on separate pages and puton the same page they still work however the submenu of the slide down menu does not. if I remove the style sheet that belongs to the gallery
Then the munu works, however (obviously) the page layout goes wrong. if i remove<h1 class="title">Alex Holland Perspective</h1> the menu works however page layout goes wrong andI loose my header
Here is the code.
View 4 Replies
View Related
Jun 3, 2011
I'm using this method of toggling which i found on webdevelopers and I'm having issues with trying to make two other toggles with in a toggle.This is the code:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">[code]....
So I'm basically trying to have three or more divisions above in the code, that I'll be able to click to show two more divisions that users can click on to show something inside their divisions.
View 1 Replies
View Related
Dec 1, 2009
I am using ASP validators and I have a contact form. I want to be able to have a phone and email radio button group. The email textbox also has a RegularExpressionValidatorIf the phone item is selected then I want the validation to be enabled on the phone text box making it mandatory while the email text box isn't, and if they choose the email as the contact it will be reversed.I want to be able to do this without having to do a postback.I already have the logic on the code behind and the enquiry object.also I am fairly new to javascript so I have been using mostly jQuery as easier to implement
View 1 Replies
View Related
Oct 19, 2011
I'm making a form with some fields. Once the form is submitted it updates the page with a new div containing the data entered without refreshing. Im using jquery form plugin. What I'd like to achieve is the new div(.record) to .slideDown. I guess I need to somehow specify the exact div by giving it an id or number. I'm not sure and why im here.
At the moment when i submit all of the divs(.record) are hidden with .hide, then they all slide down with .slide. Best i can understand is to hide the last div then slide down. But again.. I don't know how to specify to only slide down the last div added and not the current .record divs on the page.
[Code]...
View 3 Replies
View Related
Jul 1, 2010
I'm using jQuery cycle plugin right now, and I want to add a new slide based on the newly created image and I want to replace this slide later if the user has updated the image. I read the document of jQuery cycle, and I found it's using onBefore callback to do the job, but it's not on the fly, how could I do it on the fly?
View 2 Replies
View Related
Dec 13, 2011
How to insert and remove slide in jquery cycle before the first slide.
View 3 Replies
View Related
May 10, 2011
I'm trying to implement JQuery Cycle onto the homepage of my website (which is a work in progress). I wish to have a banner with Previous and Next buttons, as well as a Pager and a Caption. I've added all of this to the banner. The Pager and the Caption works, but for the life of me I can't get the Previous and Next links to work.
This is my code:
<script type="text/javascript">
$(document).ready(function() {
$('#banner').cycle({
fx: 'fade',
speed: 'fast',
timeout: 0,
prev: '#prev2',
next: '#next2',
pager: '#nav2',
after: function() {
$('#caption').html(this.alt);
}
});
});
</script>
<div id="banner"><!-- banner -->
<img src="<?php bloginfo('template_directory'); ?>/images/banner_image_1.jpg" alt="Louvre Museum, Paris"/>
<img src="<?php bloginfo('template_directory'); ?>/images/banner_image_2.jpg" alt="Louvre Museum, Paris 2"/>
</div><!-- /banner -->
<div id="nav"><a id="#prev2" href="#">Previous Image</a> - <a id="#next2" href="#">Next Image</a></div>
<div id="caption"></div>
<div id="nav2"></div>
My website can be viewed here: [URL]
View 2 Replies
View Related
Mar 15, 2011
I'm rather new toJavaScriptand have spent all day trying to figure out how I can make this possible by examining others code but to no avail. I've finally bit the bullet and come to ask for some help.
I'm making a website for a friends photography and have managed to get a thumbnail gallery working as you can see here[URL]...The problem is I have no idea how to get get the prev and next links working. I have tried countless searches for the best part of the afternoon looking for a solution but mostly all I seem to uncover is lists ofpre-madegalleries andcarousels.
It would be fantastic if someone could point me in the right direction just to simply get these links incrementing and decrementing based on the image that is loaded.
View 1 Replies
View Related
Mar 24, 2010
I am very new to using jquery (and any javascript at all really) and I am having a dillema. I am trying to have several expandable sections of my webpage but I only want one to be opened at a time so I want to use slideUp and slideDown rather than slideToggle.
I want to use the same button to open and close the section. How do I do this? Here is my current jquery code, as of right now when I click expandButton1 the itemContent1 section closes and then reopens immediately:
[Code]...
View 2 Replies
View Related
Sep 11, 2011
Is it possible to use a graphic or an image, such as an arrow, instead of the text for prev next?
I've reviewed all the demos and searched the forum here. I don't see any reference to this anywhere.
View 4 Replies
View Related
Jan 7, 2011
Been playing with this plug-in for several hours now, very cool. Managed to build a decent non-linear presentation tool with play controls and multiple hotspots per slide. I noticed what I think are a few minor bugs concerning the opt.currSlide value, could also just be my lack of experience with the plug-in and JQuery. When using the 'next' and 'prev' options, the opt.currSlide value does not appear to be updated. I'm using this value to trigger hiding and showing of overlays in 'after' code. Works fine when a jump is initiated via cycle(num, trans) but not when initiated via cycle('next') or cycle('prev').
Also the "none" transition does not appear to call all of the before, after, etc.. events. As a work around, I defined a custom transition based on fade that animates the left property from 0 to 0 rather than opacity. Finally, I'd like to suggest an enhancement to the cycle method to accept cycle(num, trans, args). An example of why this is needed...
cycle(3, 'wipe', {clip: 'l2r'}).
Meaning jump to slide 3 using a wipe transition with clip set left-to-right. As a workaround for this limitation, I defined custom transitions for each of the wipe options.
View 1 Replies
View Related
Oct 14, 2009
I have worked out how to use the Next and Prev example here : [URL] and the count example here: [URL]. I can't however work out how to combine them so when you press "Next". It changes a "1 out of 5" image counter.
View 2 Replies
View Related
Aug 17, 2010
I am trying to create a pager (similar to Example 4) and I tried using the creators file (from the download link) and it just never worked. Can anyone please help me? I just want to know how to use it...if you know other examples or places that could help mefigureout how to build one,
View 3 Replies
View Related
Sep 15, 2010
well, I thought this wasn't a cycle question specifically, but it looks like it is. [URL]
in case it's not ok to just post link to my post about this on "using jQuery" forum:
this is code in cycle plugin to hide "next" nav at last slide, hide "prev" nav at first slide:
$('a#prev')[index == 0 ? 'hide' : 'show']();
$('a#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();
but what if instead of just 'hide' and 'show' I want to call a function (because I want to, let's say, just change the font-color of the link instead of hiding it)? so I did:
$('a#next')[index == opts.slideCount - 1 ? 'disableNext' : 'showNext']();
}
function disableNext() {
$('a#next').css('color','EEEEEE');
[Code]....
(and what I actually want to do is change the link to a non-link by doing sthg like $('span....').html(change code to non-link..), etc... )
View 4 Replies
View Related
Feb 12, 2011
I'm playing around with edit in place and have a list of information that is generated by a php loop. Each list has a unique ID number at the top that i need to send back to my php script. I've put the ID number in a hidden form field at the top of every list and i'm trying to read it using .val() I've used .prev to get the line ID but can't seem to get ID number.... I thought it would be something like this but i can't seem to figure it out... i $(this).find('.Id:first').val(); usally work my way though stuff but this is making my head hurt.....
View 6 Replies
View Related
May 24, 2011
I've been working with the Cycle plugin for a while, but the only problem I'm having is that if I pass a string of transition names (comma separated), the next button goes through them in the right order but the prev button does not use the previous transition as one would expect. It uses the next transition in the list given as input. I've looked around but I could only find people fixing it for scrolling horizontally. I want it to maintain the order of transitions passed as input, not a reverse animation effect.
View 3 Replies
View Related
Mar 21, 2010
I want to create bing.com like pager, with the ame behaviour.Attachments bing.bmpSize :54.14 KB Download : 262
View 2 Replies
View Related
Jun 11, 2011
I have tried many grid plugins, so this problem applies to many of them. I have this code, which is for returning the content of a row cell when clicked:
[Code]...
View 2 Replies
View Related
Oct 14, 2010
[URL]
After placing a div on each image I placed the comments following. However, prev and next lwon't work unless I uncenter the text alignment or move it up top. For some reason it just won't work when I have it centered bottom.
Attachments
gallerytestt.rar
Size : 52.06 KB
Download : 360
View 12 Replies
View Related
Jan 28, 2011
I have this cycle slideshow demo, zip. In Internet Explorer is all fine but in the Firefox hide the buttons. I tried to change and turn the divs but still was not right. Why happens this?
View 4 Replies
View Related
Jan 26, 2011
I am using the jQuery cycle plugin for several slideshows at the same time in Drupal. The problem is when there is only one image in a slideshow, then I want the "prev" and "next" buttons to be hidden away. I can get:
Drupal.behaviors.image_slider = function (context) {
$('#block-views-work-block_1 .views-field-field-work-images-fid .field-content').each(function(i) {
$(this).after('<div class="slide-pager"').cycle({
fx: 'scrollHorz',
speed: 500,
timeout: 0,
nowrap: 1,
sync: 1,
easing: 'easeInOutQuint',
activePagerClass: 'active-slide',
pager: $('.slide-pager').eq(i),
prev: $('.prev').eq(i),
next: $('.next').eq(i),
after: function (curr,next,opts) {
$('.caption').eq(i).html(this.alt);
var msg = (opts.currSlide + 1) + ' av ' + opts.slideCount;
$('.msg').eq(i).html(msg);
}});
});
};
View 4 Replies
View Related
