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’
Hello!
I would like to congratulate the author of this script Coin Slider and very good.
I put it on their website where I work and was very nice.
I’m having trouble viewing it to the site in Firefox, Safari and Google Chorme not load the coin slider over the internet explorer work perfectly.
Anyone know any solution?
Sincerely,
Paulo Neves
anybody can help me? my menu at the top overlap the slider..Does anyone know how to do this?(please visit http://kluang.jkrjohor.gov.my)
For images not big enough to fit the display area, I’d like them to center instead of tile. Does anyone know how to do this?
Can the slider be made to slide the image (moving left to right)?
Is there a way to pick where to start in the order?
Images stack in IE6 but work great in any other browser, has anyone encountered this problem and know of a fix?
Solved it myself. Please delete these 2 comments.
Hello, I was wondering if anyone can help me make this slider work with timthumb. Here’s my image src:
<img src="<?php bloginfo('stylesheet_directory') ?>/scripts/timthumb.php?src=<?php get_image_url(); ?>&w=800&h=225&zc=1" alt="<?php the_title(); ?>" width="800" height="225" />I checked the src in the page source and they look like this:
They work fine if I use it as a normal image, just that it won’t work with the slider.
Regards,
mainwave
Great work!!
One thing I have not been able to do is to implement a stop/pause function such as when a user clicks on a nav box the slideshow would pause.
hello and thanks for this great work!!! Only one question, its posible agree thumbnails in the navigation box?.
IE SLOW RENDERING FIXED!
change
$(‘#cs-‘ + el.id + sid).css({ opacity: 0
to
$(‘#cs-‘ + el.id + sid).css({ display: ‘none’
get rid of
//$(‘#cs-‘ + el.id + sid).animate({ opacity:1 }, 300);
and replace with
$(‘#cs-‘ + el.id + sid).fadeIn(300);
IE seems to render much better without the 486 speed look! 🙂
To randomise pictures on startup change the following:
$.each($(‘#’ + el.id + ‘ img’), function (i, item)
to
imgs = $(‘#’ + el.id + ‘ img’);
$.random(imgs);
$.each(imgs, function (i, item)
Also to add a fade function that fades the whole image I did the following:
1) copy the swipe effect function and rename it to fade.
2) Add if(eff == ‘fade’) $.fade(el) in the effects function
3) In the transitionCall function make delay = params[el.id].delay if the params[el.id].effect == ‘fade’
4) In the transition function only do the setInterval if the effect type is not fade.
5) In the transition function add the following after the if(imagePos[el.id] == -1 ) {…}
if (params[el.id].effect == ‘fade’)
{
squarePos[el.id] = 0;
while (squarePos[el.id] < (params[el.id].spw * params[el.id].sph))
{
$.appereance(el, order[el.id][squarePos[el.id]]);
}
}
Also I changed the Appereance animate function to use sDelay instead of the hard coded 300.
Thanks
If you want it to go faster in IE, try reducing the number of squares per width and height.
Update – I fixed the image stack by adding an overflow:hidden to the containing DIV. However, it does appear that this slide show doesn’t not render properly in IE 6, 7 and 8. The transitions are extremely slow and it uses up a ton of CPU.
This issue has been brought up many time in the comments and it looks like hasn’t been and probably wont be addressed. Although this is a great looking slide show that’s easy to impliment, the fact that it doesn’t work properly in IE6, 7 & 8 is a huge red flag for actually using this.
Please correct me if there is a solution to this.
Thanks!
I really like this – but there are a couple bugs. First, the slide show transitions are extremely slow in IE. Try comparing IE and another browser. Also, all the image files show stacked when the page first loads. It think there needs to be some style changes to fix this.
Hi Ivan, i have a created a different version of your WordPress plugin of this engine… it replace the header picture of the default installation, so there is a lot of possible configurations etc… you can see it by visiting my site…
If I have many pictures, do I need to create for every single picture an html tag or does exist an eaysier way to implement the pictures?
For example only giving the path where pictures are located.
Great plugin nice work 🙂
Just so ya know the link in the settings panel to your website is broken.
Thanks
Loy
Ok, figured it out. I changed the order of my css and scripts and also downloaded jQuery (please see http://docs.jquery.com/Downloading_jQuery) and here is how I have it all ordered and referenced (css is in the ‘css’ folder and the scripts are in the ‘scripts’ folder.
Has anyone else had an issue of the images stacking on top of each other instead of the transition working? Clearly I have missed something but I am struggling to figure out what it is. Any help appreciated.
All set on using your Coin Slider. I’ve got an issue though, this plugin is butt ugly if javascript happens to be turned off. All the images are just displayed down the page, beyond the box. I’m not sure how to get it to degrade gracefully. Any ideas?
Sorry I forgot to post the page where I am trying to work out the coin slider: http://www.pacificrosefarms.com/index_2.php
Thanks!
Hello. This is a great slider. I am trying to implement it in a page in my website, but the square navigations buttons keep appearing on the text and not under the slider itself. I have tried other solutions similar to this problem, but nothing I have found has worked so far. Could you give me some help?
Thank you
Oh, nevermind about the last post. I solved the problem already. It was about paths in my own css code 🙂