Announcement

Collapse
No announcement yet.

SFNT: Hero Image slide show not working

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • lesliekirk
    replied
    Thanks Matt - it's rolling along now!

    Leave a comment:


  • Matt Zimmermann
    replied
    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
    Code:
    <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
    Code:
    <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
    Code:
    // ---- 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: ''
        });
    });

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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.

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • lesliekirk
    replied
    Originally posted by Matt Zimmermann View Post
    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)

    Leave a comment:


  • Matt Zimmermann
    replied
    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.

    Leave a comment:


  • lesliekirk
    started a topic SFNT: Hero Image slide show not working

    SFNT: Hero Image slide show not working

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

    Code:
    <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:


    Code:
    <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

    Code:
     <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?


Working...
X