0

I am putting a common garden variety cycle slideshow on this page: http://www.orientalhealthsolutions.com/index-new. For some reason the images don't overlap like they do here in my test configuration: http://www.orientalhealthsolutions.com/cycle.html

Here is the html:

<div class="slideshow">
    <img src="/photos/slideshow-1.jpg" alt="slideshow-1" width="600" height="410" />
    <img src="/photos/slideshow-2.jpg" alt="slideshow-2" width="600" height="410" />
</div>

Here is the jQuery:

$('.slideshow').cycle({
   fx: 'fade' 
});

Here is the CSS:

.slideshow  { 
    width: 600px; 
    height: 410px; 
    overflow: hidden;  
    }

I get an error message that $ is not a function, so I either have a conflict or I've messed something else up. Any mentoring-guidance would be appreciated.

Thanks.

forrest
  • 10,570
  • 25
  • 70
  • 132

1 Answers1

1

Yeah looks as though you have a conflict going on with something.

In chrome: console.log($) is undefined, where as console.log(jQuery) works.

Quick fix change $('.slideshow') to jQuery('.slideshow')

Tim B James
  • 20,084
  • 4
  • 73
  • 103
  • This is just a quick fix though, so you would be best trying to find a more elegant solution to avoid this in the future. – Tim B James Apr 13 '12 at 15:19