d
Topic
Posts:
6
June 28, 2013

Linking Javascript and images in shopify This post is outdated

Hi there

Please will you assist me.  I have designed and customized a nice image slider in dreamweaver and it contains .js files.  all works perfectly when i view it in my browser from dreamweaver.  I have copied the html code into my theme.liquid/index.liquid template where i want the slider to be, copied the relevant css code into my style sheet, uploaded the .js files and images into my asset library and have called it as follows into my head section of my theme.liquid file:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

  <script type="text/javascript" src="{{ 'jquery.gallery.js' | shopify_asset_url | script_tag }}"></script>
  <script type="text/javascript" src="{{ 'modernizr.custom.53451.js' | shopify_asset_url | script_tag }}"></script>
 
  <script> $(function() {
                $('#dg-container').gallery();
});</script>

  <script type="text/javascript">
  jQuery.noConflict();
</script>

 

I have also linked or referenced my images as follows in the index.liquid template:

<div class="container">
          <section id="dg-container" class="dg-container">
  <div class="dg-wrapper">
                    <a href="#"><img src="{{ 1.png | asset_url }}" alt="image02"><div></div></a>
                    <a href="#"><img src="{{ 2.png | asset_url }}" alt="image03"><div></div></a>
                    <a href="#"><img src="{{ 3.png | asset_url }}" alt="image04"><div></div></a>
                    <a href="#"><img src="{{ 4.png | asset_url }}" alt="image05"><div></div></a>

</div>
              <nav>    
                  <span class="dg-prev">&lt;</span>
                  <span class="dg-next">&gt;</span>
              </nav>
            </section>
        </div>

I feel like i have done all the necessary steps but it wont work at all - nothing shows up.  It creates the space for the DIV on the site but there is nothing in it.  Am i referencing the images correctly and linking the .js files correctly?

Please will someone assist me - i am really not familiar with the Liquid language and it is not working like it does in my normal html templates.

look forward to any feedback.

thanks

Nikki

 

i
Replies
Posts:
2784
Last edited June 28, 2013

HI,

 <script type="text/javascript" src="{{ 'jquery.gallery.js' | shopify_asset_url | script_tag }}"></script>
  <script type="text/javascript" src="{{ 'modernizr.custom.53451.js' | shopify_asset_url | script_tag }}"></script>

Those files are certainly NOT Shopify Asset URL's. They are Asset URL's. Try this instead:

 {{ 'jquery.gallery.js' | asset_url | script_tag }}
 {{ 'modernizr.custom.53451.js' | asset_url | script_tag }}

You do not use the script_tag filter AND wrap the script in script tags.. that is also a big mistake. That should fix your wagon fine. 

Specializing in Custom Shopify Apps hunkybill@gmail.com http://www.resistorsoftware.com
Posts:
6
June 28, 2013

Thanks so much for this - silly me.  i have made those changes but still nothing shows up.

is this correct that i have included:

<script> $(function() {
                $('#dg-container').gallery();
});</script>

 

also is this correct that i have included:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

Perhaps i am also not referencing the images correctly - because these dont show up at all.

Thanks

Log in or sign up for an account to reply.

This thread has been closed! You will not be able to reply.