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 RepliesIs 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.
i'm trying to use this script to build an image gallery with prev. and next buttons.
[Code]....
is there any way i could use that script or something similar? , using nice galleries built with jquery,etc is not an option because my images are very large.
I can put together some fairly simple HTML,and can borrow chunks of JS code to suit certain basic purposes. I have managed to accomplish two separate goals using javascript, but am having trouble combining their results. I have created an image link that randomly calls a URL from an array. I also have a separate roll-over image. What I am trying to do is have the link that accesses the array also be a roll-over image. I can't seem to accomplish this.
[URL]
This URL is what I am working on. The "b" symbol is the roll-over. The "right" arrow accesses an array at: [URL] I have tried simply adding my roll-over code to randomize.js and adjusting the array accordingly, but that doesn't seem to work.I would like the "right" arrow to be a roll-over image as the "b" symbol is, but also access the "randomize" array as it currently does.My problem is that my understanding of JS isn't great enough to determine how separate pieces of code might be combined or function together.
I am trying to create an image gallery, with two buttons next and previous which work fine, and with a counter like (1/10) etc. I've got it to work but for some reason the slideshow never counts the first image so therefore is always one image behind. Somebody pointed out to me it is probably that the array starts at 0 and something else at 1
[Code]...
I write simple slideshow on jQuery but I can't understand how to change current image count. Here is my current code:
HTML Code:
<script type="text/javascript">
$(document).ready(function(){
$('#slideshow img').hide();
$('#slideshow img:first').show();
function slide(){
var $top = $('#slideshow img:visible');
var $next;
if ($top.next().length > 0)
$next = $top.next();
else
$next = $('#slideshow img:first');
$top.hide();
$next.show();
}
var $imgCount = $('#slideshow img');
var $iCount = $imgCount.length;
$('#slideshow img').click(slide);
$('#totalImages').text($iCount);
});
</script>
I'm trying make like this 2/45, where 2 - is current image number.
I need a count down clock that will count down 18 minutes and reset itself at the end. also i need a counter that increases by +1 every 18 minutes starting at 0.
View 1 Replies View RelatedI'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]
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.
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.
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?
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 Relatedi'm completly new to this kind of stuff and now i have a (little) problem. First of all i had done a Accordion with Tabs like here:[URL]... Thats currently working. I split every head/title of the 3 panes in 2 parts (div), first the name of the head-pane, e.g. "First Pane" and a div-container for a navigation...
I want that the navigation part fade in of the current activating pane and the other navigations should be fade out.It's not easy to explain what i mean
[Code]...
I want to integrate the new Progress Bar UI feature on jQuery 1.3.2 and jQuery UI 1.7.2 : [URL]When I combine then however, the new tab style of jQuery 1.3.2 takes over as seen here:[URL]How can I insert the new Progress Bar into the old Tabs, without the tabs reverting to the new design?
View 1 Replies View RelatedI've been having a hard time combining these 2 files, and im fairly new to jquery so i'm not sure what is blocking out (if at all) these two files won't work together on a website i'm developing for a client .Here's the two codes i'm attempting to mergeOnes rather simple which i've written, for a fade in fade out technique.
Code:
$(document).ready(function(){
$(".fade_img").fadeTo("250", 0.3);
$(".fade_img").hover(function(){
[code].....
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... )
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 RelatedI'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 RelatedI have basic JS knowledge. I am trying to organize a JS timer which counts down to a specific date. After the target date is meet the timer starts to count up. Can someone point me to a JS sample which executes this count-down+target-date+then-count-up theme?
View 2 Replies View RelatedI am using a delayedObserver which works great, but I can't figure out how to use it when the field I am binding is loaded via ajax. So ideally, something like this:
$('[data-live_form_field]').live
.delayedObserver(0.35, function(value, element){
$(this).parents('form:first').submit();
});
This would bind any form elements with the live_form_field data attribute to the observer and submit the form. The code doesn't work though since that isn't the right syntax for the .live method.
[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
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 RelatedI 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);
}});
});
};
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:
I am trying to bind the live event to the fadeTo(). I am doing so because after the page is loaded, I am adding new elements to the page through ajax and need them to come in as faded. This is what I currently have.
$('.work').fadeTo('fast',.35);
This is what I have tried to do.
$('.work').live(fadeTo('fast',.35));
Above does not seem correct, but I have searched for more info/documentation on using live() with fadeTo but have found nothing.
I've got identical javascript code that I want to run when either a page loads or inputs to a form change. Right now, I've got two separate statements:
[Code]...
I think the obvious answer is to combine the two with a Javascript IF/OR (||) statement, but I can't seem to get the syntax correct, I think probably due to the open '(' before 'function' in both cases and the fact that it doesn't close until 'some javascript' has executed.
Any suggestions on the correct syntax, or is there a different way of implementing this that I'm not aware of? The two separate statements work fine right now, but I'd rather not have to maintain multiples of the same javascript code.