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.
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'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 want the code for a button effect. The button is for a graphic button, on clicking it it changes its graphic to an ('on' image), plays a sound effect, then changes graphic to the first image('off' image), then it goes to a link.
Files would be
Images/offbutton.jpg
Images/onbutton.jpg
sound/buttonclick.wav
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 know very little about jQuery. I am trying to design a graphic menu bar that is capable of displaying each button in 4 modes: up (neutral), hover, down (mouse down), and selected. After some research, I was able to "come up" (by cutting and pasting and burning up a couple of neurons) with the code below. It works well enough but I'm sure it could be written a lot better. What I really would like to do is to change whatever button is "down" to go back "up" once another button is pushed, changing the img src, or by whatever method is more efficient.
<script src="js/jquery-1.3.2.js" type="text/javascript"
charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() { // image rollover
$(".topmenu img").hover(function() {
this.src = this.src.replace("-up","-hover");
}, function() {
this.src = this.src.replace("-hover","-up"); .....
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 RelatedI am a systems analyst and network admin for [url].... We already have an exisiting site, which has JS. We now need to add a lightbox effect onload that will basically overlay the page in grey and focus on a banner before you can access it. Thus, pushing everyone who visits to read a banner. I would also like to add an "x" graphic in the top right corner of the projected image to close the banner and return to veiwing our site.
View 1 Replies View RelatedI have a graphic that is the gray ver of the one i want to swap in it looks like this
The base_url() is part of CodeIgnighter it puts in the base url so i can access the image directory
I have an onload comand in my body to refresh this ever 10 seconds what i need to know is how to swap out the above file for friend_request.png witch is in the same dir
This is the loaded graphic and this is what i want it to look like if my script returns a friend request just to give you and idea of what i'm doing.
I am trying to dynamically close a div overlay. I have an x that dynamically appears, then closes when the user presses it. I want the overlay to also close when the user clicks the close button. So far I've tried to bind the click event to my button but its not working.
CSS:
div#testbutton{}
HTML
<a href="#" id="testbutton"><img id="testbutton" class="close" src="/images/common/button-close.gif"/></a>
[Code]......
I have a button on my site, which when clicked calls an ajax function. What I want to do though, is append a loading graphic for just 2 seconds inside the button such that it looks as if the website is 'busy' saving when the button is clicked. This is obviously just for user feedback as the 'save' is done instantly - it's just for user feedback to make the user confident that the save button has worked. To do this, I'm trying to append a loading image to the save button, delay for 2 seconds, then remove the image, but it doesn't seem to work.
I have this HTML:
<p><a href="#" title="" class="save">Save</a></p>
And this jQuery:
$
(
[Code]....
Here's what I'm trying to do: When someone clicks on plain text with div of "hdrlink", then div of "slideshow" will close up using toggle. At the same time also need div of "headerNav" to move up 300px. When the user clicks "hdrlink" again, then "slideshow" reappears and "headerNav" move back down 300px (starting position)Here's the script:
<script type="text/javascript">
$j('#hdrlink').click(function(){
$j('#slideshow').toggle(800),
[code]....
I have been using the JQuery Cycle plugin on my website and love it! It has so many options and seems customizable to do basically anything. My question is about the previous and next buttons. At the moment I am using next:'#next2, .pics img', prev:'#prev2', to make previous and next arrows underneath the image as well as use the image itself a "next" button. I would like to remove the arrows underneath the image and just use left and right halves of the image as a previous and next button. Previous being the left half and next being the right half of course. I've been searching for this being posted before and have not found any discussions on it. Also, the JQuery Slideviewer does what I'm trying to accomplish: JQuery Slideviewer Demo
if(zeroLeft >= pictWidth/2) { var uiprev = ui.parent().prev().find("a"); (jQuery(uiprev).length != 0)? uiprev.trigger("click") : ui.parent().parent().find("a:last").trigger("click"); } else { var uinext = ui.parent().next().find("a"); (jQuery(uinext).length != 0)? uinext.trigger("click") : ui.parent().parent().find("a:first").trigger("click"); }
Is there a way to incorporate this type of button in JQuery Cycle? It seems easy enough to make the image a next button I feel like dividing it between the two shouldn't be that much more difficult.
I am having a bit of trouble attempting to get this button roll over stuff working. I have looked up some really simple code to create a image rollover action for my navigation buttons. But nothing happens when I hover on any of the buttons though. When I use firebug to figure out what is wrong, it says that $(this) is the document and not the image button. The example/preview is here: [URL].
This is the jQuery code here for quick reference:
<script type="text/javascript">
$(document).ready(function(){
$('#navigation img').hover(
function() {
$(this).src = $(this).src.replace("Red","Yellow");
}, function() {
$(this).src = $(this).src.replace("Yellow","Red");
}); });
</script>
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 only looking for someone that will want to point me in the right direction...and i'll try to do my best on my own ...we want to offer personalized tshirts...so we do need a way for the customer to choose size, color, subject and text and check all this in real time...someone that is doing something that we want is
http://www.vistaprint.com/embroidered-activewear.aspx?xnav=top#in your opininion,
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 am using Javascript on an upload page to hide the form and show an animated progress graphic when the user clicks Submit. The problem is that the graphic, which is initially hidden, does not animate when displayed in Internet Explorer. (works great in Firefox, of course)
I searched Google and found a couple postings describing this problem, but I couldn't seem to find a solution.
Does anyone know how to fix this?
[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 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:
