Announcement

Collapse
No announcement yet.

SFNT: Hero Image slide show not working

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

    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?


    Leslie Kirk
    Miva Certified Developer
    Miva Merchant Specialist since 1997
    Previously of Webs Your Way
    (aka Leslie Nord leslienord)

    Email me: [email protected]
    www.lesliekirk.com

    Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

    #2
    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.
    Matt Zimmermann

    Miva Web Developer
    Alchemy Web Development
    https://www.alchemywebdev.com
    Site Development - Maintenance - Consultation

    Miva Certified Developer
    Miva Professional Developer

    https://www.dev4web.net | Twitter

    Comment


      #3
      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)
      Leslie Kirk
      Miva Certified Developer
      Miva Merchant Specialist since 1997
      Previously of Webs Your Way
      (aka Leslie Nord leslienord)

      Email me: [email protected]
      www.lesliekirk.com

      Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

      Comment


        #4
        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.
        Matt Zimmermann

        Miva Web Developer
        Alchemy Web Development
        https://www.alchemywebdev.com
        Site Development - Maintenance - Consultation

        Miva Certified Developer
        Miva Professional Developer

        https://www.dev4web.net | Twitter

        Comment


          #5
          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.

          Leslie Kirk
          Miva Certified Developer
          Miva Merchant Specialist since 1997
          Previously of Webs Your Way
          (aka Leslie Nord leslienord)

          Email me: [email protected]
          www.lesliekirk.com

          Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

          Comment


            #6
            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: ''
                });
            });
            Matt Zimmermann

            Miva Web Developer
            Alchemy Web Development
            https://www.alchemywebdev.com
            Site Development - Maintenance - Consultation

            Miva Certified Developer
            Miva Professional Developer

            https://www.dev4web.net | Twitter

            Comment


              #7
              Thanks Matt - it's rolling along now!
              Leslie Kirk
              Miva Certified Developer
              Miva Merchant Specialist since 1997
              Previously of Webs Your Way
              (aka Leslie Nord leslienord)

              Email me: [email protected]
              www.lesliekirk.com

              Follow me: Twitter | Facebook | FourSquare | Pinterest | Flickr

              Comment

              Working...
              X