Log in

View Full Version : Using Ultimate Fade-In Slideshow with Shopify?


farrahdiva
11-25-2011, 07:13 AM
Hello! I'm trying to use The Ultimate Fade-In Slideshow on Shopify.com, and I've hit a wall. Unfortunately, Shopify uses its own proprietary code called "Liquid", so I've been trying to shoehorn the header Script Tags into this code and it doesn't appear to be working. I'm wondering if it's because I don't know how to insert a comment inside a Script Tag in liquid (such as the mandatory notice for legal use). Would its placement be an issue? Here's the code that I think is the problem:

[CODE]
<head>
<title>{{ shop.name | escape }} &mdash; {% if template == "404" %}Page Not Found{% else %}{{ page_title | escape }}{% endif %}</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="copyright" content="{{ shop.name | escape }}" />
{{ content_for_header }}
{{ "reset.css" | asset_url | stylesheet_tag }}
{{ "screen.css" | asset_url | stylesheet_tag }}
{{ "theme.css" | asset_url | stylesheet_tag }}
<!--[if lte IE 6]>{{ "ie6.css" | asset_url | stylesheet_tag }}<![endif]-->
<!--[if IE 7]>{{ "ie7.css" | asset_url | stylesheet_tag }}<![endif]-->
{{ "option_selection.js" | shopify_asset_url | script_tag }}
{{ "jquery-1-3-1.js" | asset_url | script_tag }}
{{ "jquery-ui-1-7-1.js" | asset_url | script_tag }}{% if template == "product" or settings.homepage_is_product_page %}
{{ "jquery-slimbox-2-02.js" | asset_url | script_tag }}{% endif %}
{{ "jquery-theme-1-0.js" | asset_url | script_tag }}{% if template contains 'customers' %}
{{ "shopify_common.js" | shopify_asset_url | script_tag }}
{{ "customer_area.js" | shopify_asset_url | script_tag }}{% endif %}
{{ "jquery.min.js" | shopify_asset_url | script_tag }}
{{ "fadeslideshow.js" | shopify_asset_url |script_tag }}
<script type="text/javascript">
/***********************************************
* Ultimate Fade In Slideshow v2.0- (c) Dynamic Drive DHTML code library
(www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/
</script>
<script type="text/javascript">
var mygallery=new fadeSlideShow({ [ICODE]...

(I copied the jquery.min.js file to my assets folder just in case that was the problem. Didn't seem to help. )

I'm guessing you'll probably need the actual website address--if you do, I will happily email it to you (this is for a client, and the site isn't published yet).

Anyway, if anyone can offer some advice, please do!

Thanks in advance!
djr33
11-25-2011, 07:50 AM
Here are a few thoughts:

1. The code you use to generate the website is central to why this isn't working-- what really matters is the code that is generated on the page. View your page and go to view->source (or the equivalent in your browser) and then look at what's happening with the real HTML. What you've posted is just pseudo-HTML. Posting a link to the page would be fine, or you could post the HTML source code here if that's not possible. But get that code from your browser, not from the "behind the scenes" version.
Once you figure out what final output you need, then you'll hopefully be able to adjust the underlying code (what you posted here) to generate it. If you get stuck, the only real solutions are trial and error, and maybe asking the company that hosts the website how to get scripts to work-- we can't answer that because we don't have experience with the system (probably-- maybe someone does, but it's unlikely).

2. The legal notice comment is just text and it doesn't do anything. In fact, removing it entirely won't actually cause the script to stop working-- it will just be in violation of the terms of service here. So I recommend two things:
A) Remove the notice while developing (and later replace it) so you can find out if that is the problem specifically.
B) If it is the problem, then you don't actually need to put the notice in that exact format. The preference is to have it in the source code, but if you want to put it in HTML comments (<!--...HERE...-->) instead, that would be fine since this is clearly a technical problem. Alternatively you could ask for special permission to put the legal notice in an external .js file since you can't reasonably put it in the page. You should check with ddadmin for that, but it sounds fine to me.

3. For the rest of the JS for this site, I would recommend putting all of it in external .js files and including it using the same format as shown in the other code. It looks like that might be the only way to make Javascript work on the page. There's generally no need to have Javascript be inline or in external .js files-- they work approximately the same way. If you run into any trouble with that specifically, feel free to post more information once you've tested it.

I hope that helps you get started. Working within a limited-HTML framework is always tough. And sometimes they simply disable some parts of JS and/or might have other conflicting scripts.

Another way to test this is to save a copy of the page locally and work on it that way. Get everything working, or identify any conflicts with other scripts. Then you just need to compare that to what's being generated and see if you can work around it.
farrahdiva
11-25-2011, 07:29 PM
Hey, Daniel.

Thanks so much for responding so quickly! I went ahead and went to Shopify support per your suggestion (I don't know why I didn't do that initially... probably because it makes too much sense... I seem to like making things hard for myself), and they totally helped me out.

But thanks for letting me know about the legal notice--I'll go ahead and throw it in an HTML comment (no problem doing that!).

Anyway, thanks again for all of your suggestions--you're awesome!

Thanks again (again!),
Farrah