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’
Hey Lucrozade,
you can download my “fixed” Version here (http://tinyurl.com/39zfhsg).
Hope this helps…
Ingo, I have the same problem, but your solution doesn’t seem to work for me :/
I got i figured out,
if you wanna have multiple rows you need to change the .css() in line 29 (coin-slider.min.js) to css({‘position’:’relative’});}
regards
Hey,
first of – great plugin, i love it!
Unfortunately i have a little problem, i try to present about 30 pics with the slider and the navigation (little boxes) is overflowing. I searched my way through the css but wasn’t successful with changing the overflow mode. Is there any way to present for example two rows of “boxes” ?
thanks in advance!
can i add links to image description (titles)? I tried adding it in that , but they just don’t show up. Is it possible?
Poz, i havala za slider!
Interesuje me dali je moguce skinati slajder, recimo da se stave buttons na next i prev,…?
Hvala
Hi!!! Great plugin, thanks for sharing!! I was wondering if there is a way to display images of different sizes.
Thanks again!
@Steph, @AirYT
Try to set spw: 1 and sph: 1
Yup – me too! Perfect slider for me, but i’m looking for some more basic effects. Fade for example. Thanks!
Hello, i’m looking for change the effect transition off this slider, like fade in and out, or img left to img right… or remove them.
any solution ???
ah. sorry, found the problem already – it doesn’t work if you have WP Featured COntent slider installed from IWEBNIX.
thanks for this! love it.
tried it on my local server but it doesn’t seem to work. any idea what could possibly be the problem? i have several plugins installed, perhaps there’s a plugin that is causing the problem?
Great slider, congratulations Ivan,
a dear friend recommended your slider, and i love it, but this is my first time that i use it, but with some problem,
1. I need 3 sliders on the same page, so I create 3 diferent divs for it.
2. On firefox works great, but on the IE works good on the first page, but when you go to other page gets some error on line 15, chars 165. (coin-slider.min.js)
3. I have read on your comments that there are other people with the same problem, but i can’t find the way to fixit.
The page is on http://rod.gs/epagt after the index page, click on the banner to see the error.
thnks on advance.
Great job.
@Mitch McLeod
I think that you can, just try.
@Jan Luts
I build it to work with ids. Be aware that multiple sliders on one page can slow down transitions effects and it will use a lot of CPU.
Hi, this is a great one! Only I can’t seem to get it to work without using an id div, I want a class because I want more then 1 in my page..
Hi Ivan,
Love this, works very well!
Is there a way I can have a h1 tag or paragraph tag within the description of each item?
Demo at http://www.mitchellmcleod.com/about/
Cheers,
Mitch.
Is there a way to adjust the transition speed? Is set sph and spw to 1, for transition, but it transitions to fast. Thanks!
Michele, please check solution that I propose to Wass on previous comments page. It seems that there is some JavaScript conflict on your page.
Sorry Ivan, still me.
Explorer 8 is giving me a page error for coin-slider.js telling me that “jquery” is not defined at line 12…
Just to inform.
Hope to read from you soon.
Ciao!
Michele
Hi Ivan!
I’ve downloaded and used your nice jquery slider…but it doesn’t work.
To be clear: in Chrome yes, but no way to see the transition in Firefox 3.6 and in Explorer 8 and in Safari 5.
Is it normal?
As I think your solution for a slider is one of the easiest and nicer around, is there something I did wrong?
Check my page at http://www.grapheion.org/FIS/index.html
Thanks a lot!
Michele
is there a way to modify, so when the slide show contains multiple images, only one or two that i chose can be redirect links?
also can i move the description(in ) to appear on the middle or top of the image?
@gdinary
I’m not sure that I understand. It seems to me that everything works fine on url which you sent.
Hi Ivan,
Maybe Im missing something, but I dont see any coding for the nav buttons to the slider. I managed to create some but can’t figure out out to link the buttons to the corresponding slide. Im pretty sure it has something to do with javascript, but I don’t see any.
I would appreciate any help. Thanks!
Here is the related page: http://www.skyviewmarketing.net/clients/Cheryl/photography.php#photography-top
Here is the coding that I used:
Stanley Cay Yacht Club in the Exumas, Bahamas
Junkanoo dancer in Inagua, Bahamas
….
….
Flamingos on Inagua, Bahamas
….
….
Yesss that works!!!
Thank you soooooo much for your time and help!!!!!
Hi,
i’m having a major problem with with Coin Slider on IE, it tends to display the same image as twice and looks really funny.
Link to the website on IE: http://www.usp.ac.fj/?id=9384
would greatly appreciate some1’s help on it.