I am currently looking for a JavaScript (jQuery) SlideShow Script which allows me to simply have the images fade from one to another, and then keep repeating the process. Nothing too serious, but there is one thing I need specifically for the script. I use .PNG images with Transparency in them, and I have noticed when I use other scripts, they tend to stack upon each other, which shows quite the collboration.
Thank you very much SO,
I appreciate the help!
Aaron
Use the jQuery Cycle Lite plugin, maybe with sync disabled.
Also, force images inside the #slideshow element to be hidden with opacity:0 which will be overridden by inline CSS the plugin sets. However, that said it looks like the plugin sets the opacity to 0 by default for the all images except the current.
CSS:
#slideshow img { opacity:0 }
JS:
$('#slideshow').cycle({ sync:0 });
I wanted to post a link to the simplest slideshow in case others are searching for an easy way to rotate through a list of images in a div and don't need any other functionality using only jQuery...
http://jsfiddle.net/DaveAlger/eNxuJ/1/
enjoy!
Related
I got inspired by this website: https://brittanychiang.com/ especially the animations.
The ones which appear at the header when page is loaded are just typical css animations with delay or something. But when you scroll down and the another sections are visible the animation appears again and only once. Can you do it with pure CSS or you need to include JS?
Are you talking about the float-up animations on scroll? If yes, that can be done using CSS but might require some javascript as well based on your requirements to setup the animations. You can read more about it here.
Alternatively, you can use this as well to get your work done easily! However, since you want the animation to show up only once, you might have to make some changes using javascript.
I just need to display the images in the very center of the page. The images will be different widths but should still be centered. I have custom arrow pointers and I want the other images to be hidden while the other fades out and a new one in.
I've found jquery cycle and stuff but I couldn't center the slideshow to the center of the page for some strange reason.
Any advice?
What plugins can I alter (just replace images) to get what I want?
http://www.proglogic.com/learn/javascript/lesson10.php
not sure if you are still looking for this, as its been awhile since your post - but this is a very simple slideshow using javascript and a table. the image is displayed with "previous" and "next" links below, which can of course be changed to whatever you want. the only possible issue is that it uses html tables which are frowned upon (unless completely necessary). it is however, very easily center-able using css. good luck!
Checkout Anything Slider. That seems to be what you are looking for.
I have 3 different images and want to create a sprite using CSS. I understand that will reduce HTTP requests. However, I am totally new to this concept and have no idea as to how to approach this.
What would be best bet for me? Also I have seen there are some CSS sprite generators where you submit a .zip of images and it combines them.
I tried doing that, but did not understood what was happening. Any guidance regarding creating and using CSS sprites would be highly appreciated.
Update: I have gone through the A List Part article but it was not very clear to me. Can someone provide an example of using a CSS sprite? [A short, self-contained example in an answer is preferable for SO than just a link to an example elsewhere. –ed.]
The example you need to study is the following:
#nav li a {background-image:url('sprite.gif')}
#nav li a.item1 {background-position:0px 0px}
#nav li a:hover.item1 {background-position:0px -72px}
#nav li a.item2 {background-position:0px -143px;}
#nav li a:hover.item2 {background-position:0px -215px;}
Sprite.gif is a big image containing all the smaller images in a grid (doesn't have to be). You then use positioning to display just that part of the sprite that contains your image.
There are online tools that given a set of images returns a big sprite image with the coordinates of where to find the smaller images.
CSS Sprites: What They Are, Why They’re Cool, and How To Use Them
(source: css-tricks.com)
All it means when you do spriting is that your small images are tiled on a single image file. You can create this single image file yourself if you have a decent image editing program. Then you can use the css background-position property to specify the piece of the image to use for that sprite.
Look here at Google's sprite that they use for iGoogle. You are just combining the images into one large image. That way you make one request. You then use background positioning and height and width to select which part of the image you want.
This also works really well for images that change on hover, as the hover state is already downloaded and does not have any delay.
Let's say you have button which changes its background image when it's moused-over. Mouseovers need to happen instantly to give good feedback to the user. If you just simply switched the image on the button, a browser might have to go to the server to fetch the image, which would spoil the effect. By using a CSS sprite, you have each image loaded and ready to go on the button instantly.
Also, some browsers "flicker" when you switch images. CSS sprites avoid this flicker issue which can sometimes happen.
I am looking for a javascript based image slideshow solution. Requirements I received:
A few images are added to the slideshow, and it fades one image after another and then starts again from the first image
There should be a navigation in order to manually go to the next / previous image
There should be the option to pause the slideshow and continue again
Can the jquery cycle plugin handle these? Are there any alternatives for the YUI 2 framework?
Jquery Cycle plugin can definiately handle this. Check out this page of examples for more details.
For YUI 3:
http://freshcutsd.com/yui-slideshow/
-Eric
The YUI Carousel component seems like a good fit:
http://developer.yahoo.com/yui/examples/carousel/csl_circular_source.html
Take a look at the great Lightbox Clones Matrix. It's mainly based around ones which open in a div above your content, but many offer slideshow capabilities. Just use the checkboxes in the top right to filter to what you want.
I built some cross fade rollovers in IE7 using this single image technique:
http://jqueryfordesigners.com/image-cross-fade-transition/
It works by placing the rollover image in the background and fading the original image state when the user rollovers the image. IE7 hates it. The rollover state shows up directly below the original image.
You can check it out here:
http://hardtopdepot.com/dev/inner.html
It should be pretty obvious in IE7 but the add to cart buttons are suppossed to be Jquery rollovers. I am by no means a JS expert so Im not sure how to go about solving this problem, any suggestions would be very helpful. Thanks-
I guess it's a bug in the plugin. They check for browser names in the plugin, which is always a bad sign (not future-proof).
Anyways, it seems like the buttons you want are just text-buttons with fading background-color. Why can't you just tweak the link to look like a button, and use the jQuery Color Animations plugin?. This solution is better for in page search and screen readers.
I've created a simple demo for you here:
http://jsbin.com/egiha4/2
Source: http://jsbin.com/egiha4/2/edit
Needs some styling and a click handler or a href attribute.
You could just use simple CSS (example here: http://sophie-g.net/jobs/css/e_buttons.htm) to do the same thing.
Or
Use Scriptaculous (http://script.aculo.us/) if you want to have fancier timed fading.
This way you wouldnt have to spend time working on browser compatibility issues.