Skip navigation
raenulonicera
Currently Being Moderated

How to insert jquery in DW cs6?

Aug 30, 2013 8:48 PM

Tags: #jquery #links #css #cs6

Hi there,

 

I am trying to create an automatic fading slideshow for my company's website using dw cs6 and i'm trying not to use any plug ins. Is it not possible to load Spry Assests into the css coding in cs6? I can't seem to locate the Spry Assets folder and so the coding i'm using fails to work. Should I be using JQuery instead? I don't know where and how to locate it in my dreamweaver files. Is it somewhere under the Configuration folder? Is there a direct link I can use to load it?

 

 

Thank you for your help.

 
Replies
  • Currently Being Moderated
    Aug 31, 2013 11:44 AM   in reply to raenulonicera

    is there anyway to create slideshows without plug ins in dw cs6?

    No.  But jQuery plugins are nothing to be afraid of.  They're a great way to add advanced web features without a lot of manual coding.

     

    Copy & paste this code into a new, blank document.  SaveAs cycle_test.html.  Change images to your own.  That's all there is to it.

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 document 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 {margin:0 auto; width:50%;}
    .cycle-slideshow img {max-width:100%}
    </style>
    
    </head>
    <body>
    <h1><a href="http://www.malsup.com/jquery/cycle2/">jQuery Cycle 2</a> Responsive Slideshow</h1>
    <!--begin slideshow-->
    <div class="cycle-slideshow"
        data-cycle-pause-on-hover='true',
        data-cycle-speed='1000'
    >
    <!--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">
    <!--end slideshow-->
    </div>
    
    </body>
    </html>

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 2, 2013 9:35 AM   in reply to raenulonicera

    Speed = the transition speed  (500 milliseconds)

    Timeout = the interval between slides (4000 milliseconds)

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

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 3, 2013 12:45 PM   in reply to raenulonicera

    Try this:

     

    <!--begin slideshow-->

    <div class="cycle-slideshow"

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

        data-cycle-timeout="1000"

    >

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 4, 2013 9:51 AM   in reply to raenulonicera

    I always use CDNs (content distribution networks) when I can but some people prefer to download and host the scripts on their own servers.  I think that's a judgement call only you can make.   

     

    CDN PROS:

    • Less bandwidth for you to carry on your server.
    • CDN scripts are stored in people's browsers from visiting other sites which promotes a faster web for everyone.

     

    CONS:

    • Updated script libraries may cause older plugins to fail.
    • If the CDN server's go offline, your plugins will fail to work.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2013 8:52 AM   in reply to raenulonicera

    Fancybox2 is a modern lightbox viewer that works very well.

    Example:  http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml


     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 5, 2013 11:31 PM   in reply to Nancy O.

    Nancy, with all respect Fancybox is not an HTML5 friendly solution and It fails W3C validation.

     

    If you are looking for a free solution you can use good old Lightbox2:

    http://lokeshdhakar.com/projects/lightbox2/

     

    If you need cross-browser and extra features:

    http://www.ajatix.com/lightbox/dreamweaver-extension.html

     

    Alex

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 9:13 AM   in reply to ajatix.com

    Alex,

    I just want to clarify that Fancybox2 does in fact pass W3C validation in HTML5 doc types if used with the "data-fancybox-" attribute.  However, in older doc types (X/HTML), one should use the "rel" attribute instead.

     

    I think some people (myself included), have used the wrong attributes for their doc type. Although the code isn't technically valid, it doesn't seem to effect performance in X-browsers.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 6, 2013 9:41 AM   in reply to Nancy O.

    You are right, Nancy.

     

    I didn't see they support "data-.." attributes now. They don't make it very obvious and their pages still don't validate (even their home page gives multiple errors):

    http://validator.w3.org/check?uri=http://fancyapps.com/fancybox

     

    It turns out, however, that Fancybox2, in fact, can be used in HTML5 pages if you use correct attributes.

     

    Alex

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

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