I'm trying to make this script fade instead of slide while rotating through images.
/*
* Easy Slider 1.7 - jQuery plugin
* written by Alen Grakalic
* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding
[Code].....
Using this as an example - [url] - how can I get the value of "slide.src" when my images are wrapped in divs?
Like so:
I've got 4 parallel slideshows (see below) that each contain 3 images. I would like the slideshow 1 to fade first, then slideshow 3, then 2, then 4. I have no problem with making all 4 slideshows work at the same time but I can't make them alternate. I've been trying to use "after:" as a callback to trigger the next slideshow but every time I put in some more code the whole thing stops working !!
Code :
<script type="text/javascript">
<!-- $(document).ready(
function() {
$('.slideshow')
.cycle({fx: 'fade',timeout: 5000})
.cycle('stop');});
// I was trying to call this function after starting #slide-1 but I gave up !!
function nextImage1() {
$('#slide-1').cycle({fx: 'fade',timeout: 5000,after: nextImage3 });
}
-->
</script>
<div id="diaporama">
<div id="slide-1" class="slideshow">
<img src="images/diapo_1_1.jpg" width="240" height="171" />
<img src="images/diapo_1_2.jpg" width="240" height="171" />
<img src="images/diapo_1_3.jpg" width="240" height="171" />
</div><div id="slide-2" class="slideshow">
<img src="images/diapo_2_1.jpg" width="240" height="171" />
<img src="images/diapo_2_2.jpg" width="240" height="171" />
<img src="images/diapo_2_3.jpg" width="240" height="171" />
</div><div id="slide-3" class="slideshow">
<img src="images/diapo_3_1.jpg" width="240" height="171" />
<img src="images/diapo_3_2.jpg" width="240" height="171" />
<img src="images/diapo_3_3.jpg" width="240" height="171" />
</div><div id="slide-4" class="slideshow">
<img src="images/diapo_4_1.jpg" width="240" height="171" />
<img src="images/diapo_4_2.jpg" width="240" height="171" />
<img src="images/diapo_4_3.jpg" width="240" height="171" />
</div></div><!-- end diaporama -->
I prefer jQuery over flash and not sure how to tackle this, so please advise as best you can. Trying to create a site that allows for images to go full browser and then have the ability to have the other images slide in based on a click.
I also want to float a menu that will allow it to pull in other media (video, that would slide in the same way). The best example I can share is this: http://j.mp/5U79i1 What he is using is flash based (slideshowpro director and slideshow pro for flash). Not interested in flash for this personal project.
When I am trying to fade images using either .fadeto or .fadeIn/Out, I get dead pixels. This happens on both IE7 and IE8. I tried looking around for a solution, but nothing works. Here is a link to an example: click here (Don't forget to use IE.
View 10 Replies View RelatedI followed a tutorial in .net magazine (a UK web design mag) on how to fade images using jQuery. I have followed it and I can now fade images for my menu, problem is, I am not sure how to append the code to all my to fade images for non list items. For example, I have a call to action button (just a telephone number with a graphic, I have used css sprites to add a hover to the graphic, but would now like to fade it using jquery. Still not managed to get this working, here is what I for my menu, which fades the images perfectly.
html:
Code:
<div id="navigation_primary">
<ul>
<li class="home hover"><a href="home">Home</a></li>
<li class="services hover"><a href="services">Services</a></li>
<li class="work hover"><a href="work">Work</a></li>
<!--<li class="blog hover"><a href="blog">Blog</a></li>-->
<li class="contact hover"><a href="contact">Contact</a></li>
</ul>
</div>
Here is my jQuery:
Code:
$(document).ready(function() {
navigationPrimary();
});
function navigationPrimary() {
$('#navigation_primary li').removeClass('hover');
$('#navigation_primary li a')
.css({ opacity: 1.0 })
.mouseover(function() {
$(this).stop().animate(
{ opacity: 0.0 }
, 300);
}) .....
For some reason the dropdown list in my menu becomes hidden underneath the jquery fading images. If i dont fade the image it displays fine. You can check out the issue here[URL].. When you rollover Javascript, the 2 items beneath it become blocked by the images which are fading in the right panel.
View 2 Replies View RelatedI have to JS scripts running on a page, one is a fading slide-show acting as a header and the other is a light-box like image gallery. When I view a picture in the "light-box" mode it sits underneath the fading slide-show and I want it to be on top of everything - much like setting the z-index in css. Although I don't think this is the way to solve this.
Anyway, you can check what I'm talking about here: [url]
I've prepared the following page: [url]
But I would prefer the background images to fade in and out rather than change abruptly. I've spent hours searching for appropriate code, but have met a dead end so far.
Incidentally, I presume that the delay before the first background image appears is because of all the images pre-loading. Can anyone suggest a way to immediately display the first image?
I want to fade about 5 images between each other in a loop, can I do this without Flash?
View 2 Replies View RelatedAlrighty so here's what I have. Live example: [URL] It's a image slideshow that dynamically gets all the images (via php) in the current directory and puts them into the slideshow array. The array then randomly displays the images in the slideshow (via javascript). There are 5 images in the folder rotateimage which also has the php script getimages.php in it. Currently only the first image fades in however I want all the images to fade in as the first one does.
[Code]...
I'm designing a page to fade multiple images (three) in and out over a set period of time (one minute, say). The code I have works as follows:
I define an array and fill it with the div objects I want to fade in and out. I have some simple tags (2 for opaque, 1 for fading in, -1 for fading out, etc.) that I set to show the state of the object.
First I check if the object is opaque, and if so set it to fade along with a time;
Or if it's transparent I give it a 1 in 10 chance of fading in during this iteration. If it's currently fading in or out I check to make sure it's on track and change the opacity of the div accordingly.
Originally, I had the function call back to itself using setTimeout after the loop had gone through all the divs and changed their opacities appropriately. This caused an out of memory error (though, strangely, if I had any alerts in the function it didn't give me the error).
So the version below has the code in a while loop to let it run for 20 seconds - this gives me the "a script...run slowly, do you want to continue the script?" message.
So I have several questions:
1) First and foremost, why is my function causing out of memory/run slowly errors and what is the best way to fix that?
2) Is there a better way to code this effect (final result will be six lights fading in and out for a minute or so).
3)I'm not an experienced programmer, so any bad practices, ways to streamline, no no's, etc. that you see, please point out.
I've only posted the script here - the page simple consists of three divs (id's grad0, grad1, grad2) and a call to the function copied here.
I have to do a slideshow with images of different widths... am using cycle plugin, which I like very much... I have a little test slideshow here, http:[url]....it's not centering imgs in containing div (I made div width of widest image.. this will work for my situation, in which imgs will be hard-coded..)if you inspect img element in firebug (#slideshow img), it shows that the plugin adds a style of position: absolute; top: 0px; left: 0px .to the img; why does the plugin do this.. how can I center the images in containing div...
View 1 Replies View RelatedI'm using easySlider and masonry but I'm having problems in using multiple instances of easySlider. What I'm trying to do is to remove the first instance of easySlider and then create a new instance that has new set of images.[URL].. But it doesn't seem to work correctly. When you click box#1 (CM Partners) the slider works great. But when you click on box#3 (NBCM), the slider doesn't work and notice that it adds a 'Previous' link even though it's the first frame/slide. Also, the slider doesn't work.
[Code]...
I am very new to javascript and have only just started looking into it after working quite a bit in html, css and php.I have a working image banner on my webpage that switches between 1 of 2 images every 7 seconds. This all works fine but i now need to make the second image 'pcm2.jpg' a clickable link where as the first image 'pcm.jpg' which starts off the image rotation in the html page has no link. I have tried using 'document. rollbanner.href =' inside the function but that hasn't helped. Is that because the first image in the html page has no href value to begin with? If so how do i get around this as i dont want the first image to have a link, only the second one.
View 1 Replies View RelatedDoes anyone know how to disable a slide or skip one based on some dynamic piece of information? For example, I want to skip a particular slide based on the time of day.
View 4 Replies View RelatedThis is the code i'm using :
function ajaxpage(url, containerid) {
var $container= $('#' + containerid);
$container.hide().load(url, function() {
[code]....
Where's gone wrong that whenever an image fades out into 0, it reappears before another image comes out? I've wanted to make the image disappear shortly before a new image is loaded. I've worked on this and played around with the scripts, yet no finding...
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script>
[Code]...
How do I set up the cycle plugin to only change slides when a refresh is done?
View 1 Replies View RelatedI've been using the jQuery Cycle Plugin now for a variety of clients and feel pretty comfortable with implementing it and how it works. I rarely have any difficulties and it always seems to shave time off my projects. Its really is an awesome plugin that I am extremely grateful for. That being said I'm having a little difficulty with a more involved implementation on a personal project. [URL]. The plugin is working correctly - but not ideally.
Each image and title you see is a callout for a blog post. The posts are automatically added by calling the WordPress theme's "loop" - a PHP function loading the information and images from the last several posts written - then it displays each post's featured images, titles, and other info inside divs labeled "post". Afterward, the jQuery cycle plugin uses all the "post" div's to create a great user-interactive recent blog-post slider - using (my favorite) vertScroll effects.
What I'm looking for is a way to display 2-3 posts at a time instead of just 1. I've seen people have 2-3 images displaying per scroll by adding two-three images into a div - and then having that div (with more divs) cycle. What prevents me from doing something like that here is the fact that the list of blog-posts is dynamically populated by PHP. There isn't a way (I know of) to insert a </div> after 2-3 posts and then open a new <div> for the next 2-3 so that the cycle plugin knows where to stop the scroll content.
I'm using the jquery cycle plugin. the entire page is a slide show. Its working pretty well so far but now i want the body background to change as the slide changes.Is there someway to us .live() to catch the event, and then dynamically change the body background?
View 2 Replies View Relatedi am using jquery cycle plugin to show radio button in every slide, i want that user must select atleast one radio button before going to next cycle. how can i do this, i added the code. I tried adding validation in prevNextClick: method, and returning false there, but still it goes to next slide. how can i stop going to next slide if no option is selected
View 1 Replies View RelatedI need todo the following: (Fade imgs 1-17 then fadeZoom img 18 ) loop this
View 7 Replies View RelatedI have 4 images and these images are changing automatically with duration of 2 seconds with show hide animation.and there are 4 bullets with mentioned above 4 images. these bullets are highlighting for example if image number 1 is showing than bullet number 1 is highlighting. same thing for other 3 bullets and images.
View 2 Replies View RelatedIm looking for something that would allow a user to click on a button / link that would then reveal hidden content by sliding the whole of the main site content / container down.
I found this which slides the page content to the left or right [URL]
But need something vertical, almost as if the whole site was a big vertical accordian.
Or like on twitter / facebook phone app when refreshing for new tweets etc.
I am trying to create a menu that would look and act like this image illustrates: [URL] Essentially the three boxes slide down when rolled over and menu items appear in the portion that has slid down.So far, I have figured out how to make an image slide using jQuery: [URL]
View 2 Replies View Related
