How to use WP-Cycle

118 Comments

The WP-Cycle plugin allows you to upload images from your computer, which will then be used to generate a jQuery Cycle Plugin slideshow of the images.

Each image can also be given a URL which, when the image is active in the slideshow, will be used as an anchor wrapper around the image, turning the image into a link to the URL you specified.

In this tutorial I’m going to explain you how to use the WP-Cycle plugin in WordPress.

The first thing you have to do is download and installing the WP-Cycle Plugin, from this page. Now be sure you’re logged in the wordpress admin panel of your website and go to Plugins, and open the settings page of the WP-Cycle plugin (as shown below).

back-end of the wp-cycle plugin

Now just upload 2 images like I did in the image above and don’t forget to fill in the Rotator DIV ID setting, just enter a name like slideshow. Now click on Save Settings and close the window.

The next thing you have to do is opening a PHP file where you want to put your slideshow, let’s say in the header. So open the header.php in your content folder (/wp-content/themes/YOUR-THEME/header.php) and put this code on a place where you want to put your slideshow:

<?php wp_cycle(); ?>

NOW REMEMBER!! If you want to put a div around the wp-cycle, do not use a div with the same ID as you filled in the settings of the WP-Cycle Plugin (in our case that’s slideshow). Because the plugin puts a div with that name around the slideshow by itself. So if you want to put another div around it, give it an id like header or something.

So, we’re almost done… But if you look good, the slideshow doesn’t look that good in Internet Explorer if you use a background image like me (see my header on this page), to fix that you have to do the following, open up your httpdocs folder, surf to this path: /wp-content/plugins/wp-cycle/ and open wp-cycle.php.

In wp-cycle.php, change these lines (row 438 till 446 in wp-cycle.php):

jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
pause: 1,
fit: 1
});
});

To this:


jQuery(document).ready(function($) {
$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({
fx: '<?php echo $wp_cycle_settings['effect']; ?>',
timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
cleartypeNoBg: true
});
});

As you see we added cleartypeNoBg: true, this is for Internet Explorer, if you don’t add this line you’ll see an ugly background in your slideshow (it’s a bug from Internet Explorer).
Also we deleted the pause: 1 and fit: 1, because in my opinion they don’t do anything good to the slideshow, my slideshow stuttered but deleting those lines it fixed the problem.

So, now we’re done and everything is working fine… But if you still have some problems with styling your slideshow like I did, then you have to read further because I’ve got the solution. The wp-cycle plugin adds styles in the index.php, as you all know the styles in the index.php overrides the stylesheet styles. So what you have to do: Go to the wp-cycle folder in the plugins folder of your wordpress blog and open wp-cycle.php. Now scroll to the bottom of that file and delete the following code

margin: 0; padding: 0;
overflow: hidden;

So now we’re finally done. If this post didn’t help you out or you still have problems with the WP-Cycle plugin, don’t hesitate to put your question in a comment below, then I’ll try to help you out.

About Erik

Erik is a graduate IT manager who spent years involved with the web programming both front-end and back-end, as a hobby. Since 2008 he knew he didn't want to start a job in the IT business, but more in the web business. So since the end of summer 2010 he studies digital communications at a university in Utrecht, which is called "Hogeschool Utrecht". Since the summer of 2011 he started his own company, where he works part-time after school. The company is called "Only Media" and is specialized in creating websites with Wordpress, front-end programming (also html5, css3 and jQuery) and back-end programming like PHP in combination with or without SQL. View all posts by Erik →

Subscribe to our mailing list

* indicates required

118 Responses to “How to use WP-Cycle”

    Veronica says: September 18, 2013 at 5:27 am

    Hi Erik,

    The plugin stopped working all of the sudden. The pictures are no longer rotating, and it shows only one static image. I read someone had the same issue after updating WordPress. We have the 3.6.1 version.

    Do you have any tip on how to solve the issue?
    It would be greatly appreciated.

    Regards,
    ~Veronica

    Reply
    Linda Lee says: May 14, 2013 at 1:58 am

    Tom- Removed this: pause: 1,
    fit: 1
    but we still have this long pause of white space between each slide.
    I have use wpcycle for years and I cannot figure out why it is doing this on this one site.
    I tried all the transitions and it was still there. Thanks for your help!
    http://youngwellnesscenter.com/

    Reply
    gchinola says: May 2, 2013 at 12:27 am

    I’ve added a background image to #rotator and gave it some padding so it would show up around the sides of the image that is rotating. I can’t figure out how to center the rotating images within that area. They are all aligned to the top left no matter what I try.

    Reply
    Frank Leonard says: January 12, 2013 at 6:56 am

    Hi Erik,
    I love the wp-cycle plug-in and your tutorial on setting it up was AWESOME!!! My only question is this: I want to set up DIFFERENT slideshows on different pages of my site. Is there any way to do that? Thanks for any help you can provide.
    Frank.

    Reply
    only media says: January 14, 2013 at 12:02 pm

    Thank you Frank! Glad to hear this tutorial helped you out.

    The plugin doesn’t support multiple slideshows, unfortunately. The best way to setup multiple slideshows is by adding the code manually in your theme. You can find all the information you need on the jquery cycle plugin website: http://jquery.malsup.com/cycle/. If you have any questions about it, don’t hesitate to ask :)

    Reply
    Mercy says: January 1, 2013 at 6:27 pm

    Hi! I hope you can help me…I have wp-cycle installed as a plugin and it was working perfectly until one day the settings just disappeared. Additionally, when I upload a picture, it will tell me that it uploaded fine,and I can see it on the front page of my website, but I cannot see the list of uploaded images in the settings panel. I have deleted the plugin and reinstalled it, I have deactivated all other plugins to make sure they’re not conflicting and that also did not help at all. Thanks for any help you can give me.

    Reply
    only media says: January 2, 2013 at 12:08 am

    Dear Mercy,

    Have you updated WordPress to the latest version? If you did, that might be the problem. In that case you can contact Nathan Rice (http://www.nathanrice.net/), the developer of this plugin. Or you can place the slideshow manually, without a plugin. Visit http://jquery.malsup.com/cycle/ for more information. Hope this helps.

    Reply
    Mercy says: January 11, 2013 at 4:02 am

    Thank you for your quick response! I didn’t see it until now but this is helpful. I will look into those things.

    Carl says: October 25, 2012 at 8:43 pm

    So, I have wp cycle installed but it does not rotate.
    (bet you never heard THAT before).

    I have wp_head() and wp_footer() in-place…and that made it show up but the images don’t cycle. I’m pretty sure the error is on my part.

    The url is: http://steelehairboutique.com/

    the slider is on the index page. any ideas?

    Reply
    only media says: December 20, 2012 at 12:59 pm

    Dear Carl,

    Sorry for my delayed answer. If you got any problems in the future and don’t receive a response from this website, please mail me a responder: info@only-media.nl. I like to help as much as I can, but I don’t receive any “new comment” alerts anymore… Very strange.

    But I see you solved the problem on steelehairboutique.com? If so, can you share your solution with us?

    Reply
    ryan says: August 17, 2012 at 6:05 pm

    We absolutely love your blog and find almost all of your post’s to be just what I’m looking for. Would you offer guest writers to write content for you personally? I wouldn’t mind composing a post or elaborating on a few of the subjects you write related to here. Again, awesome site!

    Reply
    Cheri says: July 14, 2012 at 5:10 pm

    Thank you so much for your help in fixing the transparency bug in IE 7 & 8. The 
    cleartypeNoBg: true did the trick..
    Cheri Calvert

    Reply
    Adam says: June 29, 2012 at 9:19 pm

    Hi Erik,

    I am using your plugin for a slideshow located at http://www.waldcreations.com/forecast . My question is that I can’t figure out how to get rid of the pause on hover. I would like the slideshow to continue regardless of where the mouse is. Do you know a solution for this?

    Thanks,
    Adam

    Reply
    Rose Harkins says: March 11, 2012 at 9:16 am

    Hi Erik, Can you please tell me how to stop the rotation on after one loop. I would like to stop and stay on the last image. Thanks!

    Reply
    Erik van de Ven says: March 28, 2012 at 11:44 pm

    Just add “end” with a stop function in the jquery cycle code, see code below:

    $(‘#slideshow’).cycle({
    end: function() {
    $(‘#slideshow’).cycle(‘stop’); }
    });

    Reply
    Rose Harkins says: March 30, 2012 at 2:12 am

    Hi Erik – thanks for your response! I added the code above into the 
    wp-cycle/jquery.cycle.all.min.js file but it didn’t work. What am i doing wrong? Thanks!!!

    Jesshedrick says: February 19, 2012 at 12:32 am

    Hi Erik, I am hoping you can help me. I changed your code as you reccomend. I am having    a pause between images in the slider. Any ideas? foxyloxycafe.com

    Reply
    Kirsty says: December 28, 2011 at 7:17 pm

    Hi.  I’ve used WP cycle with exactly the same settings on a number of websites, but on his one:  http://IndagoDogPhotography.co.uk  the time between the slides is exactly the same time as how long the slides actually show for (so slide for 4secs then fade to white for 4secs repeated) I’ve uninstalled, changed pictures and settings, done everything I can think of but can’t fix it – please help!!

    Reply
    Jesshedrick says: February 19, 2012 at 5:35 pm

    Kristy, I figured this out and wanted to post in case anyone else has the same problem. WordPress was automatically entering a tag between images causing the blank space. I went into the wp-cycle plugin and removed near the bottom 

    echo $newline; 

    and it worked!

    Reply
    Linda Lee says: May 14, 2013 at 2:04 am

    I looked for echo $newline; in my php file for wpcycle and it is not in there and I have exactly the same problem. The pause inbetween each image is the same as the time the image is shown.

    Linda Lee says: May 14, 2013 at 2:18 am

    When I looked for echo $newline; in the text editor it was not there but I looked at the php file in the code editor in my cpanel and found it.
    That fixed the problem, thank you so much-Jesshedrick , and thank Erik for leaving this thread up to help all of us. There is no support for this plugin, the guy was working at Studiopress and just blogged again for the first time since 2009!
    That is why everyone thinks you are the plugin creator.

    :)

    Ray Gwynn says: August 17, 2011 at 9:40 pm

    Is there a way to update the code to create move up or down buttons for arranging the images in the plug-in. I have remove images to upload in a new image somewhere other then at the end and then upload the removed images back in.

    Reply
    Bruce says: August 2, 2011 at 12:57 am

    Great workaround Brian. I would never have thought of trying that. Is there any way to have two different slide shows on two different pages? Thanks

    Reply
    Gourav Guleria says: May 31, 2012 at 9:22 am

    Hi Bruce, I have enhanced wp-cycle to ten sliders each having ten images. If you want to do that I can help you. Thanks.

    Reply
    Brian says: June 23, 2011 at 10:31 pm

    An update to my post above. I worked out that if I delete the links in “Image Links To” then it displays fine in IE. Guess I will leave the images like that for now unless someone has a solution.

    Reply
    admin says: July 1, 2011 at 9:33 am

    Dear Brian,

    Apologize for my late response. I also have problems with IE and the WP-Cycle plugin. I still haven’t work it out, how to fix it. Once I’ve found a solution to this problem, I will add it to this article. But good to know you’ve found a temporarily workaround.

    Best Regards,
    Erik

    Reply
    Brian says: July 5, 2011 at 12:31 am

    Hi Erik.
    Thanks for the reply. I will keep an eye out for your updates to this article. Also, in a future update would it be possible to add a box so we can change the order in which the images are displayed. I have found that if I need to add another photo in a specific place (for example, in 1st position) then need to delete all the images and upload them again in the correct order. Not a major hassle but would be a handy feature.

    admin says: August 2, 2011 at 8:25 am

    Hi Brian,
    I didn’t create the wp-cycle plug-in. Strangely, many think I did. But I’m considering of creating my own. Because this plug-in still has many shortcomings. I’ll let you know when the time comes.

    Brian says: June 23, 2011 at 10:19 pm

    Hi. Have got WP Cycle plugin working perfectly on my shower chair site when veiwed with Firefox but it only shows the first slide and then goes blank in IE. I have added the code as mentioned in your article but it did not help. You can see it here. http://shower-chair.co.uk

    Any ideas?

    Reply
    Elke says: June 23, 2011 at 12:40 am

    This fix did not work roundtripwithdaveo.com. Any help would be so much appreciated.

    Used the following as pasting your code directly in broke wp-cycle in Firefox:

    jQuery(document).ready(function($) {
    	$("#").cycle({
    	    fx: '',
    	    timeout: ,
    	    speed: ,
    	    cleartypeNoBg: true
    	});
    });
    
    Reply
    Elke says: June 23, 2011 at 12:41 am

    ignore the code pasted above – did not parse correctly.

    Reply
    admin says: July 1, 2011 at 8:54 am

    Dear Elke,

    Apologize for my late response. Try deleting the “$” sign, between the brackets (behind function). That may cause problems, because you use already jQuery instead of $. Good luck!

    Best Regards,
    Erik

    Linda says: June 8, 2011 at 6:35 pm

    Hi,
    I’m having a problem with my wp-cycle. The slides look good and the links work fine. My problem is that it takes a while before the first slide shows up. And after the last slide, there’s a blank screen for a while before it starts over with the first slide. I don’t want any space between the last and the first slide, I just want it to go straight from one to the other. And when you first open the homepage I want the slideshow to start immediately.
    Any suggestion?
    Thank you in advance

    Reply
    admin says: July 1, 2011 at 8:26 am

    Hello Linda,

    Apologize for my late response.
    I guess you are using Internet Explorer as browser? Because the error you describe, is a common error in Internet Explorer. I still haven’t found a solution for that. You can fix it temporarily by changing the slide effect to something like fade.

    Best Regards,
    Erik

    Reply
    alex says: April 25, 2011 at 5:35 am

    Hey.

    I’m already using wpcycle on a testsite that I’m making. It works perfect. But it appears on all sites since I changed the Branding img in twenty ten child’s style.css

    How can I use it as header (below top content with logo and menu) only on the index.php. I don’t want it to appear on the rest of the pages.

    Reply
    admin says: April 26, 2011 at 1:06 am

    Hi Alex,

    Welcome on this website and thanks for your comment. You can show wp-cycle only on the homepage, just by adding the following code:

    <?php
    if(is_home()){
      wp_cycle();
    }
    ?>
    

    Erik

    Reply
    Drake says: April 16, 2011 at 11:13 pm

    I’m able to get the slideshow in the correct place, however the images are being displayed all at once stacked instead of the rotating slide show. I must be missing something but no idea what. Site is http://www.kimberlygoldman.com

    Reply
    admin says: April 21, 2011 at 10:09 am

    I’m sorry for the delayed response, but I’m quite busy these days with my clients’ websites.

    but I see you’ve got the slideshow working already? It works at least well in IE 8, 9 and Firefox

    Reply
    CarloH says: March 12, 2011 at 8:25 pm

    Erik, Great blog and great tutorial!

    Please, post on a more gradual way blogpost with tutorials like this! Keep up the good work.

    Also I really appreciate the design from your weblog!

    From Holland with Love!

    Reply
    Dee says: October 10, 2010 at 12:27 pm

    Hi Erik,

    Thanks for your post.
    I had wp-cycle running perfectly other than the need to resize my images, so I took them down and when I fixed them and put them back up it wasn’t showing that they were there in the admin area and when I look on my blog some are up twice. My admin area only allows me to add more images, I can’t delete any or edit any settings or uninstall the plugin because there is nothing there other than the upload image button. Any ideas of what went wrong?

    Your help is much appreciated :)

    Reply
    fnkymnky says: September 3, 2010 at 12:38 am

    Hi Erik,

    Is there any simple way to implement previous and next buttons into wp-cycle?

    I’ve been looking everywhere to find out how to do it, but even the developer doesn’t mention it.

    Thanks.

    Reply
    Erik says: September 3, 2010 at 9:19 am

    Ofcourse there is :), just open wp-cycle.php (/wp-content/plugins/wp-cycle/wp-cycle.php) and at the following code on line 454 (i guess):

    next:   '#next2',
    prev:   '#prev2'

    Then you will get something like this:

    jQuery(document).ready(function($) {
    	$("#<?php echo $wp_cycle_settings['div']; ?>").cycle({ 
    	    fx: '<?php echo $wp_cycle_settings['effect']; ?>',
    	    timeout: <?php echo ($wp_cycle_settings['delay'] * 1000); ?>,
    	    speed: <?php echo ($wp_cycle_settings['duration'] * 1000); ?>,
                cleartypeNoBg: true,
                next:   '#next2',
                prev:   '#prev2'
    	});
    });

    After that, you have to add two buttons somewhere on your webpage with the ID’s #next2 and #prev2 (see code above). I advise you use the fade mode if you use those buttons. Because if you use the slide mode, the plugin will show the previous image if you click on the previous button, but it will keep sliding from the right to the left. So it’s a bit confusing for some people, so I guess the fade mode is better if you use the buttons.

    Reply
    Timo says: August 26, 2010 at 11:41 am

    Hi Erik,

    i solved my problem regarding the false positioning of the wp-cycle in IE, Opera etc. The error was a missing “>” after my enclosing div-container. That way the wp-cycle-div didn’t lie within my div and IE positioned it underneath…don’t know why FF and Safari ignored that…but…anyway…

    I put your Blog into my Blogroll… :-)

    Reply
    Laura says: August 26, 2010 at 8:03 am

    Hi Erik,
    I have an image in wp-cycle that links to a different website. Is it possible to make this link open in another window instead of self (eg. blank target)?

    Many thanks

    Laura

    Reply
    glen farris says: February 9, 2011 at 11:27 pm

    go to plugins, then edit plugins, edit the wp-cycle/wp-cycle.php code.

    Find this section

    /*
    ///////////////////////////////////////////////
    this final section generates all the code that
    is displayed on the front-end of the WP Theme
    \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\
    */

    Find this line:

    echo '<a href="'.$data['image_links_to'].'" rel="nofollow">';
    

    and change it to this:

    echo '<a>';
    

    works perfectly.

    Reply
    Kim says: August 25, 2010 at 5:46 pm

    Hi Erik,
    I am very new to having a web page but thankfully wordpress is very accommodating to a newbie. I have the wp cycle on my site but I would like to have the option of playing music in the background…where viewers could click on a button that says “play music” or something. Is there a plug-in that you know of that could work or even some code? I had found something online but unfortunately it took me of the home page when I clicked it.
    Thanks in advance.
    Kim

    Reply
    Timo says: August 25, 2010 at 2:34 pm

    Hi Erik,

    i also have a strange Prob with wp-cycle and i hope you can help me. In IE8, the images got scaled up – i fixed that after reading a post here that suggested to put links on the images. Ok, that did it. But the whole container of wp-cycle is misplaced in IE8…in Firefox everything is ok… do you have any clue? I would really appreaciate any kind of help. Thx in advance, Timo

    Reply
    Thomas says: August 25, 2010 at 8:06 am

    Hi Erik !

    Thx a lot for your advices I encouteer exactly the same problem as Jean :
    “The first slide picture is good and normal, but the second one, scales completely way off.”

    And adding a link fixed the bug as you said !…

    Thanks again !

    Reply
    greenkoi says: August 17, 2010 at 5:11 pm

    I was having a helluva time figuring out the bug in IE8. The trick for adding a link to the images did it for me. just adding # to the link to saved the day.

    Reply
    Orla says: August 17, 2010 at 11:18 am

    This has been driving me nuts for the past day or two. I’m soooooooooooo glad I came across your article, it really helped me out.

    Thanks a mill Eric. Great post!

    Regards
    Orla

    Reply
    jens says: July 29, 2010 at 6:41 pm

    BUT!
    If you look in Opera the problem is still there!!

    Not as big of an issue as in IE8 but still irritating :)

    Reply
    Erik says: August 2, 2010 at 7:04 pm

    Hi Jens,

    Your problem is as a BIG question mark to me. I figured out (when I used Opera’s Dragonfly, to check the HTML and CSS code), that the problem would be fixed if you give all the pictures a link. You can do this in the configuration page of your wp-cycle plugin. The problem is that something gives the IMG’s a different style. And somehow if the pictures have a link, it gives the A tags those styles and not the IMG tags. That’s why the only solution would be giving the IMG’s a link, so the styles will be added to the A tags and not the IMG tags. I was not able to override those styles, so this is the only solution I could find.

    Kind regards,
    Erik

    Reply
    joel says: July 13, 2010 at 7:17 am

    Hello, i need to know how can i show the wp cycle only on the front page of my wordpress thanks

    Reply
    Erik says: July 13, 2010 at 1:23 pm

    That’s not so difficult, just place the following code in your index.php:

    <?php 
    if(is_page('home')){ 
      wp_cycle(); 
    }
    ?>
    
    Reply
    Hello dear Erik! says: July 8, 2010 at 7:11 pm

    Also please let me know if there is any plugin like flipbook but with ability to flip text-books and not jpg books??

    Reply
    Hello dear Erik! says: July 8, 2010 at 6:12 pm

    Ok i have not yet uploaded the website on server, it is on my localhost, i will give you the link later, thank you for your kind and soon reply, best regards Matthew

    Reply
    Hello dear Erik! says: July 8, 2010 at 2:49 pm

    I am very glad to find this page on internet, because i am having trouble with wp-cycle. In IE and Mozilla it working normally, but when i open it on Opera it spread the photo on screen, please let me know what to do asap, as i very much need this to work out, i very much want that shuffle mode work on my website slideshow, best regards Matthew

    Reply
    Erik says: July 8, 2010 at 3:42 pm

    @Hello dear Erik!, if you can post a link to your website, then we can see your problem and probably find a solution for it.

    Reply
    Aaron says: July 2, 2010 at 11:35 pm

    Hey Guys,

    Im trying to put my wp-cycle slideshow inside a hollowed out png I wanna use as a frame….

    please see here: http:www.hdcustomsllc.com

    its frameless right now, and I cant figure out how to beat the over riding css the plugin churns out….

    any thoughts?

    thanks in advance!!!!!

    a

    Reply
    Erik says: July 8, 2010 at 3:40 pm

    Hi Aaron,

    Sorry for my late response, but I see you’ve already fixed your problem, good to see. I bet you’ve used one image and putted the slideshow behind this image, by using position relative and z-index? In my opinion that’s one of the most logical solutions.
    Anyway, good luck further with your website and thanks for visiting my weblog!

    Best regards,
    Erik v/d Ven

    Reply
    Mutual Fund advice says: June 6, 2010 at 3:35 am

    Hi,I found your blog searching Google and your information has been very informative.I am curious as to whether or not you are generating a good online income, so please reply and let me know.I have bookmarked this page and I will be check back regularly if that’s ok with you.I would love to think you will call in on my blog please and let me know what you think of it.

    Reply
    casinoonline says: June 2, 2010 at 8:25 pm

    I absolutely appreciate posts, which might be of profoundly beneficial as a service to beginners in blogging as I am. I already possess a humble collecting of blog posts and other articles, from which I step by motion learn many aspects of life. Through you in return your resource.

    Reply
    Venice Kuhlmann says: May 30, 2010 at 5:14 pm

    Hello,this is Venice Kuhlmann,just found your web-site on google and i must say this blog is great.may I share some of the article found in this blog to my local students?i am not sure and what you think?anyhow,Thanks!

    Reply
    Erik says: June 2, 2010 at 10:38 am

    Hi Venice,
    If you can also share my web url or just link to my website, then it’s not a problem.
    Regards,
    Erik

    Reply
    mundial 2010 sts says: May 25, 2010 at 8:08 pm

    I want to start blogging too, what do you think, which blog cms is good for noob?

    Reply
    Erik says: June 2, 2010 at 10:42 am

    WordPress is the best, it has a lot of possibilities and it’s very easy to use. Joomla has also a lot of possibilities but isn’t easy to use and not so user-friendly. Drupal is also easy to use, but I don’t have that much experience with that cms system. My opinion is, just use wordpress, it’s the best =).

    Reply
    Robert from usa onlinecasino says: May 18, 2010 at 9:11 pm

    I admit, I have not been on this webpage in a long time… however it was another joy to see It is such an important topic and ignored by so many, even professionals. I thank you to help making people more aware of possible issues.

    Reply
    JR says: May 5, 2010 at 12:09 am

    Hi Erik,

    Because I want the wp-cycle to appear in the header, I added the code into the header, but I could not center it and it was not behind the logo or the navigation bar like I wanted it to.

    Reply
    Erik says: May 5, 2010 at 6:38 pm

    Hi JR,

    I took a good look at your website and you have to add the following lines in your css, which creates a better result:

    /*Add z-index:0 to your rotator*/
    #rotator {
        z-index:0;
    }
    /*Add z-index:3 to your navigation*/
    #nav {
        z-index:3;
    }
    /*Add z-index:3 to your intro*/
    #header p#intro {
        z-index:3;
    }
    /*Add z-index:3 to your logo text*/
    #header h1#logo-text a {
        z-index:3;
    }
    

    I hope this will solve your problem.

    Reply
    JR says: May 3, 2010 at 6:37 pm

    Hi Erik,

    I am trying to insert my wp-cycle into the header of a colourise theme: http://www.memphissigs.com

    I can’t seem to get the slideshow to work properly. I would like for it to be shown in the background.

    Thanks!

    Reply
    Erik says: May 4, 2010 at 11:13 am

    Hi JR,
    Did you put the following code somewhere on your page?:

    <?php wp_cycle(); ?>

    Cause I can’t find any slideshow in your sourcecode, maybe you can post some php or html code to show me what you mean?

    Reply
    Erik says: April 27, 2010 at 7:33 am

    Thank you for your responses, I really appreciate that. If you got any problems with the plug-in or this tutorial, don’t hesitate asking me for help.

    Reply
    Dee says: April 26, 2010 at 9:43 pm

    I really like this plugin. It’s simple and efficient. One thing though. Is there a way to stop it from looping (I think that’s the term) through the pictures after music has stopped?

    Reply
    Erik says: April 27, 2010 at 7:36 am

    Well, I don’t know which code you use for your music, but you could use the following code to stop the cycle plugin:

    $('#slideshow').cycle('stop');
    Reply
    Joy says: July 1, 2011 at 3:23 am

    Erik,

    I love the way you are helping people and your answer about how to stop the cycle of the plugin is the only I could find. Thanks for that.

    However, I am not a programmer (I can do html and css and copy/paste code and script) and so I do not know how or where to enter the code you recommended for stopping the rotator. I know how to get into the php file but where inside the file would I put this code:

    $(‘#slideshow’).cycle(‘stop’);

    And is it the only code I need or is there something else that goes with this code? Or a specific place in the php file where this code goes?

    Thanking you in advance for your help.

    Joy

    admin says: July 1, 2011 at 9:24 am

    Dear Joy,

    Thank you for your kind comment. I appreciate that :).

    About where to place the JavaScript code, that depends on when you want to stop the slideshow. Do you want to stop the slideshow after some background music has stopped? Or when you move your cursor over the slideshow? Or something else?

    Maybe you could place the URL of the website, where you are using the WP-Cycle plugin. Maybe I can help you better then.

    Best Regards,
    Erik

    Erik says: April 15, 2010 at 5:43 pm

    Everybody, please do not post here only to promote your or other websites, those posts will be deleted immediately.

    Reply
    Rick says: April 14, 2010 at 8:58 pm

    Great post. Helpful, and it got wp-cycle ‘almost’ working in IE. Prior to implementing your solution, I saw a solid purple background in IE around each image. Now the solid purple is gone, but there is a gauze-like background that didn’t show before. Site is georgiaip.org/wordpress/

    Reply
    Erik says: April 15, 2010 at 5:38 pm

    Hi Rick,
    Thank you for your comment. About your website, did you solved the problem already? Because I was looking at your website but I can’t see any bug :).
    Regards,
    Erik

    Reply

Leave a Reply