Databases
StackOverflow2013
Postsdbo
POjShowOff only works in WP when jQuery is in same PHP file?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjShowOff only works in WP when jQuery is in same PHP file?
    text
    copied!<p>I'm using <strong><a href="http://ekallevig.com/jshowoff/" rel="nofollow">jShowOff</a></strong> in a WordPress theme inside <code>home.php</code> within the <code>&lt;body&gt;</code>.</p> <p>Inside the <code>&lt;head&gt;</code> in <code>header.php</code> I have both jQuery and jShowOff scripts properly included:</p> <pre><code>&lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'&gt;&lt;/script&gt; &lt;script type="text/javascript" src="../js/jquery.jshowoff.min.js"&gt;&lt;/script&gt; </code></pre> <p>but the jShowOff functionality only works if I also include jQuery inside <code>home.php</code> (within the same php file as where I'm putting jShowOff HTML code).</p> <p>Can anyone think of why this might be or how I can fix it? I shouldn't need to load jQuery twice, right?</p> <p>Within the <code>&lt;body&gt;</code> in <code>home.php</code> the code looks like this:</p> <pre><code>&lt;script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js?ver=1.6.1'&gt;&lt;/script&gt; &lt;div id="basicFeatures"&gt; &lt;div title="Shore"&gt;&lt;a href="http://google.com"&gt;&lt;img src="http://farm5.static.flickr.com/4017/4303103738_a4745a3e6d_o.jpg" width=660 height=371 alt="Shore"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div title="Flower"&gt;&lt;a href="http://imgur.com"&gt;&lt;img src="http://farm5.static.flickr.com/4067/4302354517_d72d321f17_o.jpg" width=660 height=371 alt="Flower"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div title="Fern"&gt;&lt;a href="http://gmail.com"&gt;&lt;img src="http://farm3.static.flickr.com/2739/4303103822_a3b23ff7f5_o.jpg" width=660 height=371 alt="Fern"&gt;&lt;/a&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; $(document).ready(function(){ $('#basicFeatures').jshowoff({ links: false, controls: false, effect: 'fade', cssClass: 'basicFeatures', hoverPause: false }); }); &lt;/script&gt; </code></pre> <p>Update: Problem solved by switching <code>$</code> to <code>jQuery</code>:</p> <pre><code> &lt;script&gt; jQuery(document).ready(function(){ jQuery('#basicFeatures').jshowoff({ links: false, controls: false, effect: 'fade', cssClass: 'basicFeatures', hoverPause: false }); }); &lt;/script&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload