Coin Slider: Image Slider with Unique Effects
After jqFancyTransitions I decided to release new jQuery image slider plugin with more unique transitions effects. I have ideas for new effects and after I didn’t find that somebody already implement that I create Coin Slider.
Thanks to you and your comments Coin Slider have lot of features that jqFancyTransitions didn’t have at the beginning. Basically it’s a latest (and improved) version of jqFancyTransitions but with new ‘fancy’ transitions effects.
jqFancyTransitions slice your images in stripes, while Coin Slider slice them in squares. And that’s the main difference. With changing order of appearing those squares I achieve random, swirl, rain and straight effects.
While I was working on this I felt like I’m on college again. Creating order of squares appearance remind me on my college projects when I spent few night and days trying to solve some problem. Random and straight was simple, but swirl effect give me some trouble. Fortunately, I’m working with Milos Popovic who like to solve those kind of problems and he help me about swirl function. Kudos to Milos!
For rain effect I spent few rainy hours to built it and that’s why I gave him that name. Naming things is something that I’m not good at.
How to use
Download jQuery, Coin Slider javascript file and CSS file and include them on your page:
<script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript" src="coin-slider.min.js"></script> <link rel="stylesheet" href="coin-slider-styles.css" type="text/css" />
Add slider content and create one div with an id and put images and image descriptions, similar to:
<div id='coin-slider'> <a href="img01_url" target="_blank"> <img src='img01.jpg' > <span> Description for img01 </span> </a> ...... ...... <a href="imgN_url"> <img src='imgN.jpg' > <span> Description for imgN </span> </a> </div>
At the end all you have to do is to call Coin Slider:
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider();
});
</script>
Example
Coin Slider have a lot of options for helping you set slider as you want. If you want to have 900px wide slider, without navigation and with 5sec delay between images you’ll do this:
<script type="text/javascript">
$(document).ready(function() {
$('#coin-slider').coinslider({ width: 900, navigation: false, delay: 5000 });
});
</script>
List of all options
width: 565, // width of slider panel height: 290, // height of slider panel spw: 7, // squares per width sph: 5, // squares per height delay: 3000, // delay between images in ms sDelay: 30, // delay beetwen squares in ms opacity: 0.7, // opacity of title and navigation titleSpeed: 500, // speed of title appereance in ms effect: '', // random, swirl, rain, straight navigation: true, // prev next and buttons links : true, // show images as links hoverPause: true // pause on hover
Notes
Be careuful with spw and sph because large numbers can cause transitions problems.
If you don’t set effect all effects will be implemented by random.
Check the demo of ‘The More Awesome jQuery Image Slider’
Comments [ 1,448 Comments ]
» Trackbacks and pingbacks click to expand
-
[...] Transition Effects: there are three types: random, swirl and rain. All of those effect you can see here Hide Navigation: check this if you don’t need prev/next buttons and navigation squares below [...]
-
[...] Image Slider with Unique Effects (demo | download) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Coin Slider Best jQuery Plugins [...]
-
[...] Minimalistic Slideshow Gallery with jQuery (演示 | 下载) Image Slider with Unique Effects (演示 | 下载) Create image gallery in 4 lines of [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (demo | download) [...]
-
[...] Puedes ver el slider/carrusel de ejemplo llamando a la 404 de fcsites.com, por ejemplo: http://www.fcsites.com/carrusel, os recordamos que se trata del slider: http://workshop.rs/2010/04/coin-slider-image-slider-with-unique-effects/ [...]
-
[...] MORE INFO / DEMO (free plugin) [...]
-
[...] MAIS INFO / DEMO (plugin gratuito) [...]
-
[...] Coin Slider [...]
-
[...] order of appearing those squares I achieve random, swirl, rain and straight effects.Demo – DownloadFlexSliderSimple, semantic markup, Supported in all major browsers, Horizontal/vertical slide and [...]
-
[...] like coinslider, but didn’t like the prev/next button, so I expanded hte code to include an extra parameter: [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] Image Slider with Unique Effects (演示 | 下载) [...]
-
[...] 7。投币式滑块 [...]
Leave a Reply
More Articles
-
Twitter Flock for Wordpress: multiple accounts tweets with style
Twitter Flock is Wordpress plugin for showing multiple accounts tweets with different color scheme for every account. Also, there are setting allowing you to control how your tweets will look like and will they cache or not.
One of the things that make this plugin different form other are tabs above Twitter Flock box. This tab [...]
-
jqIsoText: jQuery Text Effect Plugin
Some content on our pages are more important than other and we want to made him eye catching. There are lot of techniques to achieve that. One of them is jqIsoText.
With this plugin we’re changing size of letters in text. It starts from one font size and increment or decrement to other font size. On [...]
-
HTML5/CSS3 Circle Music Player
More then a year ago my very talented designer friend Jovan Stanojevic presented me idea of Circle Music player which will play local .mp3 files. This is his original idea, but after we start to work on this a few things were changed.
[He have more great designs which you'll see if you go to his [...] -
Coin Slider 4 WordPress
Coin Slider 4 WP will show your featured posts as image slider and rotate them using unique effects provided by jQuery’s Coin Slider.
Implementation is very easy, after you download and activate this plugin, just paste one line of code in your template and Coin Slider 4 WP is ready to use.
Demo pagesee how it worksDownloadtry [...]
May 6, 2010
Love your script. And thanks for answering all the questions!
May 6, 2010
Krzysztof: efekt cienia pod sliderem to background-image ustawiony z position: bottom. A ustawienia odnosnie wygladu ustawiasz w pliku css zwiazanym z coin-sliderem.
Great plugin Ivan!
One of the best I ever used in my Jquery adventure.
If I may ask for a little patch for this script – in IE6 transition effect is very unstable and not fluent. I have also spotted some situations where page loading indicator in webbrowser is showing that page is not fully loaded (newest FF, WinXP and newest Opera). You must click refresh button and after that everything goes smoothly.
I have also spotted a situation, where during a change of jpg file in source directory, coin slider shown new slide without refreshing of the site. That indicates, that maybe there is sometimes constant request to read a file? Try to check it out.
Great script once again!
Gabriel
May 7, 2010
@ Sandra
Ive been having trouble with this also… But i manage to get it working. Ive looked at your source and mine and the only difference is the where you placed your script, yours is at the bottom whereas mine is within my head tag? Hope this helps you. Good luck
Dave
May 7, 2010
Hi this is a nice slidshow.
But I think 2 elements are missing :
- A play/pause button
- The way to put some contents different than an image. Otherwise, can’t have to put the image into an
But great job !
May 8, 2010
BTW, just installed, few little details, on your Coin Slider Settings you have there is php missing
Thanks,
Emil
PS for all others that might be wondering around
May 10, 2010
@Gabriel Zastawnik
I know for those problems (@Rarst already reported) but there is no easy solution to fix that. I should change the approach and rewrite the whole plugin, but I don’t believe that that will happen in near future. I don’t believe that those problems are really big issue, and as I saw all other similar slider have them.
Anyway, thanks for reporting, I really appreciate that.
@Sandra
Try to add span or div with class in description span. Eg,
<a href="imgN_url" rel="nofollow">
<img src='imgN.jpg' >
<span>
Description for imgN
<span class='credits'>Some credit</span>
</span>
</a>
And after this just add style to credits class.
May 10, 2010
Hi there!
Thanks for your work on this great plugin. I just added today to my blog and everything looks fine but, of course, like many other i have a problem. Maybe this is somethign i am doing wrong but i will write about it maybe it will help you develop something better as you sure have the talent to do it.
I am using blogger.com for my blog site and i have a little delay before the script begins to do it’s work.
when the site loads all the images in the slide and their descrptions appear one under the other and after a few seconds they clapse and join into the slider you created. any idea what it is or what should i do so that the images do not appear like this before the site completly loads?
thank you
May 10, 2010
@Denis Ciumbargi
First you should include Coin Slider css and js files in header of your page. After that put next code immediately after Coin Slider holder div:
<script>
$('#coin-slider').coinslider({ height: 300, width: 930, opacity: 0.8, hoverPause: true, navigation: false, delay: 10000 });
</script>
May 11, 2010
It is a nice plugin! But i want to know anyway can change the pagination button to a image buttons(Including the active status of the button)?
May 12, 2010
I am having issues with the cs-buttons aligning to the left. I have tried altering the css in everyway I can think of…still right aligns.
http://www.signetbuilders.com/gallery.html
What am I missing?!
thanks
May 12, 2010
@Magneto
It can be done with CSS. Check older comments.
@Malmec
You should check how Sandra solve that here: http://designeworks.com/rja/work_house3.html
May 13, 2010
hi.
i wrote an issue in your google-code-page.
images diplaying in IE but not in FF
May 13, 2010
hi! great stuff.
I’ve integrated it with wordpress. So far, works great, except for one thing : the cs-buttons don’t show :s
Any clue?
May 14, 2010
this is an awesome script but i was wondering if it could do the following?
i am wanting to use the same image 5 times e.g.
for some reason it doesn’t then apply the transitional effect. it just goes static. is there a way to apply any of the effects to the same image?
thanks,
red
May 14, 2010
This is a great plugin! I was just wondering if there was a way to have the images only play once and then stop on the last image instead of continuing to play over and over again?
Thanks!
May 17, 2010
any help please?
i have tried over the weekend to get my problem working but can’t find a solution.
i am wanting to use 5 identical images but to have a transitional effect on it….it displays the image but does not do the transitional effect….the transitional effect works when using 5 different images but not the same one.
any ideas any one?
thanks in advance,
red
May 17, 2010
@red
Plugin works, you have transitions, but you can’t see because you have identical images. I can’t imagine how this kind of transitions would look like if you have identical images.
May 18, 2010
when add links to the span area it getting messy when previewing content in safari and chrome(ggl)
May 22, 2010
Thanks, this slider gallery is perfect – it’s like the one on Apple’s iTunes page.
Just FYI, I modified coinslider.php so that query_posts checks Pages instead via ‘post_type=page’; for some reason ‘post_type=any’ fails.
I have noticed a little quirk when handling pages: the setting “Number of Posts to Display:” actually encompasses the most recent # of pages, regardless of whether they have the csImage custom field or not.
Therefore, one could have the setting set to say “3″ and not have anything appear if all these csImage flags are attached to Pages that are older than the most recent 3. Increasing the “Number of Posts” number until it does encompass all Pages in the chronological timeline you wish to display seems to fix this issue.
May 24, 2010
Great slider. I ham having a slight problem. My page is adding side scroll bars. Other pages on my site do not. Only the one with the slider. Any idea?
Here’s the page http://maxfit.us/index1.html thanks!