Question

I am using jQuery Cycle for a slideshow on this page: http://www.orientalhealthsolutions.com/

The images in the center of the page should rotate. However, they are not.

Here is the HTML:

<div class="slideshow">
    <img src="{site_url}/photos/slideshow-1.jpg" alt="slideshow-1" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-2.jpg" alt="slideshow-2" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-3.jpg" alt="slideshow-2" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-4.jpg" alt="slideshow-2" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-5.jpg" alt="slideshow-2" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-6.jpg" alt="slideshow-2" width="600" height="410" />
    <img src="{site_url}/photos/slideshow-7.jpg" alt="slideshow-2" width="600" height="410" />
</div>

Here is the jQuery:

<script type="text/javascript" src="{site_url}scripts/jquery.cycle.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade',
        timeout:   4000,
        autostop: 1
    });
});
</script>

I tried using FireBug, the scripts are loading, but something is still missing and I would appreciate some help sorting it out.

Thanks!

Answer 1

jquery.dropmenu.js uses noConflict. After that you need to refer to $ as jQuery. Change your $() calls to jQuery() and it should work fine.