Sliding Image Rotator For Miva 9 Iron Wool Ready Theme

[wireless_999]

Hello, Is there an app for this via Miva or is this custom code? Thank you.

[Jim Cockerham]

Re: Sliding Image Rotator For Miva 9 Iron Wool Ready Theme

Wireless_999 - If you are looking for a simple image slider, check out this thread...

http://extranet.miva.com/forums/show...o-image-slider

[wireless_999]

Re: Sliding Image Rotator For Miva 9 Iron Wool Ready Theme

Wireless_999 - If you are looking for a simple image slider, check out this thread...

http://extranet.miva.com/forums/show...o-image-slider

Thank you. However I was not able to get this going.

[Jim Cockerham]

Re: Sliding Image Rotator For Miva 9 Iron Wool Ready Theme

Here is a quick overview of using the cssslidy for Suivant and Iron & Wool themes:

1. Place the cssslidy.js file in your /js folder.
2. Locate this code in your Global Header:

<mvt:if expr="l.settings:page:code EQ 'SFNT'">
		<div class="row sfnt-hero">
			<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
			<div class="breaker clear"></div>
		</div>
<!-- end sfnt-hero -->
</mvt:if>

Replace this line:

<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />

With this code:

<div id="slidy-container">
  <figure id="slidy">
	<a href="/p/product1.html"><img class="column whole np" src="graphics/first_image.jpg" alt data-caption="Click for more..."></a>
	<a href="/p/product2.html"><img class="column whole np" src="graphics/second_image.jpg" alt data-caption="Click for more..."></a>
  </figure>
</div>
<script src="../js/cssslidy.js"></script>
<script> cssSlidy(); </script>

Modify above code with your images and links. If desired you can edit the cssslidy.js to modify the settings.

[wireless_999]

Re: Sliding Image Rotator For Miva 9 Iron Wool Ready Theme

WOW Thank you for such a detailed explanation! You are terrific! I greatly appreciate this, you have no idea! Thank you.

Here is a quick overview of using the cssslidy for Suivant and Iron & Wool themes:

1. Place the cssslidy.js file in your /js folder.
2. Locate this code in your Global Header:

<mvt:if expr="l.settings:page:code EQ 'SFNT'">
        <div class="row sfnt-hero">
            <mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
            <div class="breaker clear"></div>
        </div>
<!-- end sfnt-hero -->
</mvt:if>

Replace this line:

<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />

With this code:

<div id="slidy-container">
  <figure id="slidy">
    <a href="/p/product1.html"><img class="column whole np" src="graphics/first_image.jpg" alt data-caption="Click for more..."></a>
    <a href="/p/product2.html"><img class="column whole np" src="graphics/second_image.jpg" alt data-caption="Click for more..."></a>
  </figure>
</div>
<script src="../js/cssslidy.js"></script>
<script> cssSlidy(); </script>

Modify above code with your images and links. If desired you can edit the cssslidy.js to modify the settings.

[titlehere]

I wanted to share how you can use the built in ReadyTheme slick slider (which is awesome) with storefront hero images to create a nice carousel on the storefront. We're using a base Suivant theme. Seen here: http://www.nordicneedle.com/

First, you need to modify your javascript (scripts.js), and add your initialization of the slick slider to your SFNT page load. Search for:

    jsSFNT: function () {

and add the initialization...

       
$.ajax({
            cache: true,
            crossDomain: true,
            dataType: 'script',
            url: '../js/jquery.slick.min.js'
        }).done(function () {
            $('#js-hero').slick({

...then add your modifiers (you can see all of them here at Ken's site http://kenwheeler.github.io/slick/).

Then what I did was add a new ReadyTheme content section using multiple hero image content (obviously you can add more than three):

<div class="row product-carousel">
    <div id="js-hero" class="column whole float-none whats-popular-carousel">
        <div class="hero">
            <mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
        </div>
        <div class="hero">
            <mvt:item name="readytheme" param="image( 'sfnt_hero2' )" />
        </div>
        <div class="hero">
            <mvt:item name="readytheme" param="image( 'sfnt_hero3' )" />
        </div>
    </div>
</div>

Create your hero images in the ReadyTheme images section (make sure the codes are correct for your carousel call). Then replace the sfnt_hero readytheme item token (found in the global header)...

<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />

...with your new carousel...

<mvt:item name="readytheme" param="contentsection( 'sfnt_carousel' )" />

I also had to replace some css (in slider.css) because the dots navigation was coded for anchor tags instead of buttons (which slick uses for nav).

Voila! Now all I have to do is change up my hero images and I'm done updating the slider.

[Jim Cockerham]

Very nice, thank you for sharing :)

[lesliekirk]

I wanted to share how you can use the built in ReadyTheme slick slider (which is awesome) with storefront hero images to create a nice carousel on the storefront. We're using a base Suivant theme. Seen here: http://www.nordicneedle.com/

Have you been able to get it to work with the Levels ReadyTheme?

[titlehere]

Have you been able to get it to work with the Levels ReadyTheme?

I have not tried it with Levels, but if it's still using slick, I can't imagine why it wouldn't work there too.

[Charles Brauer]

I am using an early version of the Suivant theme. My "Related Items" carousel does not work properly. My related items display as images in divs stacked on top of each other. Has anyone run into this problem with the Suivant theme and can you offer some help to get it to run as a slider??? Thanks.

[Matt Zimmermann]

Charles Brauer - Can you supply a link to the site in question?