Home/ Questions/Q 6070815
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T09:58:34+00:00

I’m using jShowOff in a WordPress theme inside home.php within the <body> . Inside

  • 0

I’m using jShowOff in a WordPress theme inside home.php within the <body>.

Inside the <head> in header.php I have both jQuery and jShowOff scripts properly included:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'></script>
<script type="text/javascript" src="../js/jquery.jshowoff.min.js"></script>

but the jShowOff functionality only works if I also include jQuery inside home.php (within the same php file as where I’m putting jShowOff HTML code).

Can anyone think of why this might be or how I can fix it? I shouldn’t need to load jQuery twice, right?

Within the <body> in home.php the code looks like this:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'></script>

            <div id="basicFeatures">
                <div title="Shore"><a href="http://google.com"><img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" width=660 height=371 alt="Shore"></a></div>
                <div title="Flower"><a href="http://imgur.com"><img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" width=660 height=371 alt="Flower"></a></div>
                <div title="Fern"><a href="http://gmail.com"><img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" width=660 height=371 alt="Fern"></a></div>
            </div>
            <script type="text/javascript">     
                $(document).ready(function(){ $('#basicFeatures').jshowoff({ 
                    links: false,
                    controls: false,
                    effect: 'fade',
                    cssClass: 'basicFeatures',
                    hoverPause: false 
                }); });
            </script>

Update: Problem solved by switching $ to jQuery:

        <script>        
            jQuery(document).ready(function(){ jQuery('#basicFeatures').jshowoff({ 
                links: false,
                controls: false,
                effect: 'fade',
                cssClass: 'basicFeatures',
                hoverPause: false 
            }); });
        </script>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Remove the script include tag in your page’s body. Once the page has loaded, open javascript console of your browser and check whether it responds to jQuery and $ both should respond the same object. If they doesn’t it means your $ used by some other library. Replace $ with jQuery.

    • 0