Beginner Help with Slider Images

Geoffrey Goodfellow · March 2016

I've been requested to add a slider image to the top of our home page (www.swchristian.org/new). I was able to use http://imageslidermaker.com/v2 to design this slider, and the site has given me JS, CSS, and HTML that I should need for my website. The instructions they provide are very much geared to running on your own webserver, but I need help in adapting them to work in the NetCommunity Environment and have never worked with JS before.

I used the files module of NetCommunity to upload the JS they gave me to https://www.swchristian.org/file/new-website/ism-2.1.js, then I added an unformatted text box to the top of my home page template and added the following:

<script src="https://www.swchristian.org/file/new-website/ism-2.1.js" type="text/javascript"></script>

and made sure that the placement in the HTML is set to "In the <head> tag".

Then, on the home page, I created a formatted text/image part to house the following HTML:

<div id="my-slider" class="ism-slider" data-play_type="loop" data-image_fx="zoomrotate"><ol>

<li><img src="https://www.swchristian.org/image/new-website/Slider1.jpg" /></li>

<li><img src="https://www.swchristian.org/image/new-website/Slider2.jpg" /></li>

<li><img src="https://www.swchristian.org/image/new-website/Slider3.jpg" /></li>

<li><img src="https://www.swchristian.org/image/new-website/Slider4.jpg" /></li>

<li><img src="https://www.swchristian.org/image/new-website/Slider5.jpg" /></li>

<li><img src="https://www.swchristian.org/image/new-website/Slider6.jpg" /></li>

</ol></div>

<p id="my-slider-ism-badge" class="ism-badge"><a class="ism-link" href="http://imageslidermaker.com">generated with ISM</a></p>

Lastly, I opened up the current NetCommunity CSS used for the template of my home page, scrolled to the bottom, and appended the new CSS that they gave me.

However, I'm not getting a successful slider. The JPGs are visible in the HTML formatted text/image part, but it does not appear like the new CSS is being applied nor the JS is running.

Any guidance would be much appreciated. Thanks in advance!

Jennifer Chase · March 2016

Have you tried using an unformatted text part in BBNC? I was able to get a JS slider to work that way in the past. (Sadly, I'm no longer at that organization, so I can't just take a screnshot of what it looked like for you).

Geoffrey Goodfellow · March 2016

At your suggestion, I just tried inserting the slider into an unformatted text part instead, but the results seem to be the same.

Thanks for the idea!

Chris McGrane · March 2016

Just visited your site, this issue looks resolved.

Geoffrey Goodfellow · March 2016

Thanks, Chris, but I still don't see any slider on my end.

Ironically, I just checked in Firefox, and I can see that the slider is there!!! However, when I view in IE (which a large percentage of our users use), I don't see anything. Advice on how to fix that?

Chris McGrane · March 2016

It's a compatibility issue with your version of Jquery and IE. There is a fallback you can implement, I'll post it when I'm in the office tomorrow.

-Chris

Geoffrey Goodfellow · March 2016

Thanks so much, Chris! I have to admit that I don't know much about jquery even is, but I googled the compatibility problem you described with IE and found a recommendation to add <meta http-equiv="X-UA-Compatible" content="IE=edge"> to the HTML header, and it worked! Not sure if that was the fix you were referencing or not, but I would have NEVER figured that out without your help.

Chris McGrane · March 2016

Not a problem Geoffrey! That was indeed the fix I was going to suggest, but you figured it out - very good problem solving!

-Chris

Beginner Help with Slider Images

Comments

Categories