Skip navigation
Tony414
Currently Being Moderated

Replace flash with JQuery  Cycle plugin on my website

Jun 13, 2013 6:04 AM

Tags: #cs4_dreamweaver #jquery_cycle

Hello,

 

I am hoping someone can help me with a little programming on my current website www.ci.guilford.ct.us

I am not a website developer so I am having some difficulty getting the down. I would like to replace my current flash content that scrolls through some photos with the JQuery Cycle plugin. With a lot of mobile devices not sporting flash I am leaning more toward this. Any help would be greatly appreciated and if there is anything else needed please let me know.

 

Thanks,

Tony

 
Replies 1 2 Previous Next
  • Currently Being Moderated
    Jun 13, 2013 1:00 PM   in reply to Tony414

    IMO, Cycle2 is super easy.  Simply copy and paste this code into a new, blank document.  Replace images with your own. 

     

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 with Cycle2</title>
    
    <!--Latest jQuery Core Library-->
    <script src="http://code.jquery.com/jquery-latest.min.js">
    </script>
    
    <!--Cycle2 Plugin Script-->
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cycle2.min.js"></script>
    
    
    <style>
    .cycle-slideshow {
         background: #FC3 url(your-background-image.jpg) no-repeat;
         height: 300px;/**adjust values as desired**/
         width: 325px;
    }
    
    .cycle-slideshow img { padding: 50px 0 0 62px; }
    </style>
    
    </head>
    <body>
    
    <!--begin slideshow-->
    <div class="cycle-slideshow"
         data-cycle-pause-on-hover="true"
         data-cycle-speed="2000"
    >
    <!--your images go here-->
    <img src="http://malsup.github.com/images/beach1.jpg">
    <img src="http://malsup.github.com/images/beach2.jpg">
    <img src="http://malsup.github.com/images/beach3.jpg">
    <img src="http://malsup.github.com/images/beach4.jpg">
    <img src="http://malsup.github.com/images/beach9.jpg">
    </div>
    <!--end slideshow-->
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 11:57 AM   in reply to Tony414

    Well I got nailed by Adobe for my last post.

     

    Here's how all of these jQuery effects plugins work.

     

    They need to be in a div with a particular id or class. And you tell them, "put the thing there."

     

    I still use a really old jQuery plugin that has been more than superseeded by Cycle. After I figured it out (and that took about two weeks) these plugins became really easy to understand.

     

    So, let's look at Nancy's example:

     

    She establishes a class in the style section (this might also be in your style sheet. It's called cycle-slideshow. It's in her document above with a period before it (which is how you define a class in CSS).

     

    Now, in the HTML below, she creates the div:

     

    <div class="cycle-slideshow" ...

     

    Then she does a couple of commands to make cycle work:

     

    ... data-cycle-pause-on-hover="true"

         data-cycle-speed="2000">

     

    Normally, I make these "pause-on-hover things "false" because, like in your own website, you simply want the images to show, one after another.

     

    Then she does a bunch of images:

     

    <img src= ...

     

    Now, of course you have to call two things in your page to get everything to work. First, you need to call jQuery. I generally host my own copy of jQuery for each website, but it is perfectly fine to call one remotelly:

     

    <!--Latest jQuery Core Library-->

    <script src="http://code.jquery.com/jquery-latest.min.js">

    </script>

     

    And you have to call the jQuery plugin, called Cycle:

     

    <!--Cycle2 Plugin Script-->

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/20130409/jquery.cy cle2.min.js"></script>

     

    If you are still having trouble, please respond to my message from yesterday by phone.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 14, 2013 12:06 PM   in reply to Tony414

    Just to add a little to what Mark already explained.  Links to Scripts and CSS go inside the <head> tags of your document.

     

    Images go inside the <body> tag of your document where you want them to appear in your layout.

     

    Simply replace the Flash code you have now with the images you want to use in your slideshow.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 9:09 AM   in reply to Tony414

    You have to have lines that point to your own hosted code.

     

    Here's an example:

     

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

    <script type="text/javascript" src="js/jquery.cross-slide.min.js"></script>

     

    Now, you can see that we have jQuery hosted locally on my server and it's minified. It's an older version (1.4.2) but it is the same idea. You can see that the path is a folder called "js" for JavaScript and the minified jQuery is in that folder.

     

    Then there is the second line, which points to a JavaScript plugin (called cross-slide), also hosted locally in the js folder.

     

    Final website is here: Interface Graphic Design.

     

    Locally-hosted, in a local subdirectory within the root of the website on the remote host.

     

    Make sense?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 17, 2013 10:32 AM   in reply to Tony414

    Minified code is all about trying to save as many bytes as possible in the download.

     

    Download both.

    Create a /js/ folder in the root of your website on your local machine.

    Put both JavaScript files into that folder.

    Make sure the path is pointing to those files in that folder in your local website (and you can test that by using your own browser on your local machine).

    Upload your new web page.

    Upload the /js/folder and the files within to your host.

     

    As to the border, that's CSS.

     

    Using Nancy's example for the name of your div:

     

    .cycle-slideshow {

         border-color: #fff;

         border-width: 7px;

    }

     

    would create a white border, 7 pixels wide around everything.

     

    You could also do:

     

         border-image: url("images/stationary.jpg");

     

    And then set your width.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 8:52 AM   in reply to Tony414

    The CSS border-image property isn't universally supported yet except in Firefox, Chrome, and Safari 6.  IE has no support for it and you need to add vendor prefixes for older Webkit and Opera browsers.

    http://www.w3schools.com/cssref/css3_pr_border-image.asp

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 9:26 AM   in reply to Nancy O.

    After all this talk about the cycle script, I decided to give it a try.  Is there a way to specifify how long an image stays up; not the speed of the transition, which is easily editable, but the length itself.  Here's a link to the page, if needed:

     

    http://jonfreed.com/index-cycle.html

     

    I sitll have yet to finish adding the images and sizing, etc., and I don't want the duration to "zip" by; just a moment or two shorter.  Thanks!

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 9:48 AM   in reply to jonfreed77

    Refer to the Cycle2 documentation for complete description of attributes.

    http://jquery.malsup.com/cycle2/api/

     

    You would need to add a timeout value to your data-cycle code.  A higher integer = a longer delay between slides.

     

    <div class="cycle-slideshow"
         data-cycle-pause-on-hover="false"
         data-cycle-speed="2000"

       data-cycle-timeout="4000"
    >

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 9:58 AM   in reply to Nancy O.

    Hi Nancy!

     

    First off, thanks for the documentation.  There's some really neat stuff in there!

     

    Also, thanks for pointing my directly to the function I needed.  I would've found it in the documentation - eventually!

     

    Here's the finished project, still a work-progress, though:

    http://www.jonfreed.com/index-cycle.html

     

    Thanks!

    Jon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 10:12 AM   in reply to Tony414

    I don't know of any.  I typically use background-images like this instead of image borders:

    http://www.alt-web.com/sandbox/frame.html

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 10:26 AM   in reply to Tony414

    Assuming your border image is suitable for the task.  The one in my demo is just a seamless swatch that is repeated to fill the #outer container.

    http://www.alt-web.com/Images/BG/wood_oak.gif

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 11:40 AM   in reply to Tony414

    Yes, you can place a div within a div to get this done.

     

    create an outer div:

     

    <div class="outer">

    <div class="cycle-slideshow"

         data-cycle-pause-on-hover="false"

         data-cycle-speed="2000"

       data-cycle-timeout="4000"

    >

    <!--your images go here-->

    <img src="http://malsup.github.com/images/beach1.jpg">

    <img src="http://malsup.github.com/images/beach2.jpg">

    <img src="http://malsup.github.com/images/beach3.jpg">

    <img src="http://malsup.github.com/images/beach4.jpg">

    <img src="http://malsup.github.com/images/beach9.jpg">

    </div>

    <!--end slideshow-->

     

    </div> <!--end outer-->

     

    Then in CSS you can use margins to center cycle-slideshow inside outer.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 1:24 PM   in reply to Tony414

    Try this:

     

    .cycle-slideshow {

        border-width: 10;

        width: 484px;

        height: 375px;

        background-image: url(images/flash_box.png);

    }

     

    .cycle-slideshow img {

        padding: 16px 0 0 37px;

        height: 340px;

        width: 407px;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 1:36 PM   in reply to Tony414

    Download & install Firefox and get the Web Developer Toolbar add-on.  You can edit CSS & HTML in your browser and see the effects in real time.

     

    When you get the code to your liking, copy & paste it into DW.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2013 2:27 PM   in reply to Nancy O.

    The subtext of Nancy's reply here is that supporting Internet Exploder is a lost cause. I agree with her, I really do not like the trash Microsoft produced, once they "won the browser market."

     

    Here is what I would do; either install Firefox and get the add-on or keep flipping back and forth with Dreamweaver's "Live View" which is Webkit. Once you have that figured, test in Firefox, then test in Internet Exploiter.

     

    If you have a problem with the Microsoft browser, it's probably a problem with a version that is older than version 10. To support that, create an exception thusly:

     

    <!--[if IE 7]>

              <link rel="stylesheet" type="text/css" href="css/ie7.css">

    <![endif]-->

     

    This is for a website that did not work in version 7 but worked in 8 and 9. The only thing I did in that particular style sheet was to address the particular issue with 7 that was problematic, which was placing a div to start a little lower.

     

    Now, you can use an if statement for any version of Internet Exploder prior to 10 (these don't work in 10) by making a less than statement:

     

    <!--[if lt IE 9]>

    ...

     

    <![endif]-->

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 11:37 AM   in reply to mhollis55

    Hi All!

     

    I'm trying to get a caption for each image, and I found some code in the documentation, but I'm not sure how to approach it.  Any suggestions?

     

    Thanks!

    Jon

     

    the page is here: http://www.jonfreed.com/index-flu.html

     

    I'm trying to make it responsive, too - I don't know if that's a factor?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 11:47 AM   in reply to Tony414

    Hi Tony!

     

    Good timing - does your caption show up at all?  I just tried your code but nothing is happening.  Do I need that extra <div> at the bottom?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 11:58 AM   in reply to Tony414

    Hi Tony!

     

    Can I see your CSS?

     

    Jon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 12:00 PM   in reply to jonfreed77

    @ Tony & Jon,

    You'll need to download the Cycle2 Caption plugin

    http://jquery.malsup.com/cycle2/download/

     

    DEMOS

    http://jquery.malsup.com/cycle2/demo/caption2.php


    Save caption script inside a .js file in your local site folder. 

    Insert > Script > Script to add it to your HTML document.

    Save & Upload everything to your server.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 12:32 PM   in reply to Nancy O.

    Hi Nancy,

     

    I'm still trying but haven't got there yet.  I uploaded this page:

    http://www.jonfreed.com/index-cap.html

     

    In the lower left hand corner, I see a 1/5, 2/5, etc. but it's not taking my title attributes.  Also, it's not actually an overlay - more like a caption.

     

    Finally, in the "cycle" HTML markup there's this line:

    <img src="<?= $imagePath ?>/images/p1.jpg"

     

    Am I supposed to replace that code in the brackets?

     

    Thanks so much for your time

    Jon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 12:42 PM   in reply to jonfreed77

    There's no link to the Caption2 script in your document.  You need to download that script and save it inside a .js file in your local site.  I posted links for the script and how to use it above.  Did you read my ealier post?

     

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 1:12 PM   in reply to Nancy O.

    Hi Nancy!

     

    My most sincere apologies - I realized after your second post, that I had not downloaded the right file!  I hate to bother you, yet again, but I still can't get it to work

     

    (I'm starting to feel like it's hopeless and thanks so, so much for your help.):

    http://www.jonfreed.com/index-cap2.html

     

    Jon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 1:31 PM   in reply to jonfreed77

    Nothing is hopeless. But you have some HTML errors. 

    http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.jonfreed. com%2Findex-cap2.html

     

    If I disable your CSS in my browser, I can see the captions.  That should narrow your search a little.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 20, 2013 1:44 PM   in reply to Nancy O.

    Okay, I'll check my syntax.  I was pushing it with the CSS, so I'll try to narrow and pare it down!  I'll let you know my progrss.   (I'm backtracking with an earlier version where the code isn't so dense, so it's a bit like a "fresh" start.)

     

    Thanks Nancy!

    Jon

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 24, 2013 11:31 AM   in reply to Tony414

    Adjust styles as desired:

     

    <div id="alt-caption" style="margin-left: 125px; margin-top: -5px; font-size:46px"></div>

     

     

    Nancy O.

     
    |
    Mark as:
1 2 Previous Next
Actions

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points