SFNT: Hero Image slide show not working

[lesliekirk]

I am still trying to get this to work. Here is the code I have in the ReadyTheme Content Section hero_image

<section class="row hero-image">
    <div class="column whole hero-slider" data-hook="hero-slider">
        <mvt:item name="readytheme" param="image( 'slide1' )" />
        <mvt:item name="readytheme" param="image( 'slide2' )" />
    </div>
    <div class="h-breaker h-clear"></div>
</section>
<!-- end .hero-image -->

Here is the code in the Global Header:

<div class="row sfnt-hero">
                <mvt:item name="readytheme" param="contentsection( 'hero_image' )" />
                <div class="breaker clear"></div>
            </div>
            <!-- end sfnt-hero -->

Here's how the code looks on the page

 <div class="row sfnt-hero">
<div id="hero_image" class="readytheme-contentsection">
<section class="row hero-image">
<div class="column whole hero-slider" data-hook="hero-slider">
<img src="graphics/00000001/passion.jpg" />
<img src="graphics/00000001/para.jpg" /> </div>
<div class="h-breaker h-clear"></div> </section>
<!-- end .hero-image --> </div>
<div class="breaker clear"></div>
</div> <!-- end sfnt-hero -->

Why is this thing still not firing?

[Matt Zimmermann]

Hi Leslie,

What script are you calling to fire this? By default, the older ReadyThemes like Suivant and Iron & Wool, do not have support for 'data-hook' built in.

[lesliekirk]

Hi Leslie,

What script are you calling to fire this? By default, the older ReadyThemes like Suivant and Iron & Wool, do not have support for 'data-hook' built in.

Okay, color me confused - this was in the ReadyTheme configuration by default. What script is supposed to be called to get this to fire?

The ReadyTheme is one version out from the latest

Iron & Wool ReadyTheme By Miva, Inc. Version 1.4.0 (Includes 9.0005 Template Changes)

[Matt Zimmermann]

Iron & Wool does not ship with a hero image carousel. If you are using the code from one of the other ReadyThemes, you will need to copy over the JavaScript to your scripts.js file as well. As for the 'data-hook' functionality, any ReadyTheme prior to the release of Booc, does not have that included.

[lesliekirk]

Iron & Wool does not ship with a hero image carousel. If you are using the code from one of the other ReadyThemes, you will need to copy over the JavaScript to your scripts.js file as well. As for the 'data-hook' functionality, any ReadyTheme prior to the release of Booc, does not have that included.

Hmmmmm, I really don't think I copied this over from any other ReadyTheme. I could be wrong. With that being said, I have no idea what javascript needs to be copied over since I have never been able to get this function to work - I have always wound up using something else.

On a side note, is there anyway to tell if the code has been added? The Original version has no date.

[Matt Zimmermann]

Code for hero carousels has not been retroactively added to the ReadyThemes. That being said, you should be able to make these adjustments to make the carousel work; CSS may be needed to make it look correct.

Global Header

<div class="row sfnt-hero">
    <mvt:item name="readytheme" param="contentsection( 'hero_image' )" />
    <div class="breaker clear"></div>
</div>
<!-- end sfnt-hero -->

ReadyTheme Content Section

<section class="hero-image">
    <div id="js-hero-slider" class="column whole hero-slider">
        <mvt:item name="readytheme" param="image( 'slide1' )" />
        <mvt:item name="readytheme" param="image( 'slide2' )" />
    </div>
    <div class="h-breaker h-clear"></div>
</section>
<!-- end .hero-image -->

JavaScript: Add to the jsSFNT section in your scripts.js file

// ---- Hero Slider ---- //
$.ajax({
    cache: true,
    crossDomain: true,
    dataType: 'script',
    url: theme_path + '/js/jquery.slick.min.js'
}).done(function () {
    // ---- Hero Slide Show ---- //
    $('#js-hero-slider').slick({
        arrows: false,
        autoplay: true,
        autoplaySpeed: 4000,
        dots: true,
        slide: ''
    });
});

[lesliekirk]

Thanks Matt - it's rolling along now!