0

So I've been using EE for some time now (since 1.6) and have been using 2.x for the past few months. I know that Ellis added the Jquery module, but I've seen absolutely no useful tutorials or information on how to properly use it.

For instance, I require a jquery slider. Before I simply got by with vanilla javascript but for this particular project that's simply not practical.

So how would I go about utilizing a jquery slider (from an external third party, like Craftyslide) within EE itself?

Here's what I have right now (which isn't working):

<!-- header start -->
    <head>
        <meta charset="UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javasript"></script>
        <script src="/JS/craftyslide.js" type="text/javascript"></script>
        <link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
        <link href='http://fonts.googleapis.com/css?family=Raleway:500' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="{stylesheet='site/stratagon.css'}">
        <link rel="stylesheet" type="text/css" href="{stylesheet='site/style.css'}">
        <link href="{stylesheet='site/SpryTabbedPanels.css'}" rel="stylesheet" type="text/css">
        <link href="{stylesheet='site/craftyslide.css'}" rel="stylesheet" type="text/css" />
        <script src="/JS/SpryTabbedPanels.js" type="text/javascript"></script>
        <title>{site_name}</title>
    </head>
    <!-- header end -->

....

             <!-- slider start -->
             {if segment_1 == ''}    
                  <div id="slideshow">
                          <ul>
                            <li>
                              <img src="http://farm6.static.flickr.com/5270/5627221570_afdd85f16a_z.jpg" alt="" title="Light Trails" />
                            </li>

                            <li>
                              <img src="http://farm6.static.flickr.com/5146/5627204218_b83b2d25d6_z.jpg" alt="" title="Bokeh" />
                            </li>

                            <li>           
                              <img src="http://farm6.static.flickr.com/5181/5626622843_783739c864_z.jpg" alt="" title="Blossoms" />
                            </li>

                            <li>           
                              <img src="http://farm6.static.flickr.com/5183/5627213996_915aa49939_z.jpg" alt="" title="Funky Painting" />
                            </li>

                            <li>           
                              <img src="http://farm6.static.flickr.com/5182/5626649425_fde8610329_z.jpg" alt="" title="Vintage Chandelier" />
                            </li>                            
                          </ul>
                  </div>   

                  <script>
                     $("#slideshow").craftyslide();
                  </script> 
                {/if}
                <!-- slider end -->

^This is a snippet, not the complete template obviously (it's pretty meaty). But it contains all the important bits concerning the slider.

I have the appropriate jquery linked and working, I have the js file on the server in the right location and the code is all right as its taken directly from the provided demo file. But nothing works whatsoever.

Definitely need help here.

Edit: May have gotten it working. Apparently it didn't like the jquery version I was linking too via Google.

It -may- be fully working with this: 

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Edit: Well it's getting closer. Images are displaying and transitions work. It will now progress to the second slide and then stop..

Improve this question
6
  • Based on the template you have above, I'm guessing your slider is failing because you're including jQuery after all of your other JS includes - you should be linking to it first. Suspect this has very little to do with EE, unfortunately.
    – Nick Benson
    Commented Jan 3, 2014 at 15:27
  • Changed it so that I linked the jquery file first (slapped my face on this one) but it still doesn't work.
    – Mike
    Commented Jan 3, 2014 at 15:33
  • Wait.. This is being appended to the top of the call list (regardless of what I do): <script type="text/javascript" async="" src="google-analytics.com/ga.js"></script> It is, obviously, google analytics stuff. Would this play havoc with the jquery file?
    – Mike
    Commented Jan 3, 2014 at 15:42
  • try to check is if the /JS/craftyslide.js path is correct. Try too put the jquery library script in local.. Perhaps could have problems with code.jquery.com/jquery-latest.min.js.
    – Stéphane
    Commented Jan 3, 2014 at 15:43
  • You're experiencing a front-end issue here, most likely. Copy/paste the full output HTML to a GIST or something, link it here, and someone will take a look and see if they can see any issues. My guess is that one or more of the files you're requesting is 404'ing.
    – Nick Benson
    Commented Jan 3, 2014 at 15:57

2 Answers 2

Reset to default
2

If it's just for a slider on the front-end, forget that you're even using EE and include jQuery as you would with any other platform. HTML5 Boilerplate recommends using the Google CDN with a local fallback, so you could throw this segment in your template:

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
 <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.10.2.min.js"><\/script>')</script>
Improve this answer
2
  • I was under the impression proper Jquery integration with EE is trickier than that, and my lack of success in the past and present (and success with non-EE related jquery endeavors) seems to reinforce this idea. I dunno. I'm entirely open to this being some kind of obvious screw up on my end, but so far nothing seems to be working.
    – Mike
    Commented Jan 3, 2014 at 15:38
  • 1
    I've been doing jQuery and EE stuff since EE 2 came out four years ago; that's all there is to it, I promise :-)
    – Nick Benson
    Commented Jan 3, 2014 at 15:55
0

You can use the EE syntax inside javascript like:

<script>
     {if segment_3 != ""}
        {redirect="404"}
    {/if}
</script>

I guess if :

<script src="/JS/craftyslide.js" type="text/javascript"></script>

is jquery script it must be placet after the jquery library, else it will not work:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javasript"></script>
<script src="/JS/craftyslide.js" type="text/javascript"></script>
Improve this answer
1
  • Right. But there is still no functionality here =(
    – Mike
    Commented Jan 3, 2014 at 15:35

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.