Hello, Is there an app for this via Miva or is this custom code? Thank you.
Announcement
Collapse
No announcement yet.
Sliding Image Rotator For Miva 9 Iron Wool Ready Theme
Collapse
X
-
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-sliderHighly caffeinated
http://www.coffeehouseexpress.com
-
Re: Sliding Image Rotator For Miva 9 Iron Wool Ready Theme
Originally posted by Jim Cockerham View PostWireless_999 - If you are looking for a simple image slider, check out this thread...
http://extranet.miva.com/forums/show...o-image-slider
Comment
-
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:
Code:<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>
Code:<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
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>
Last edited by Jim Cockerham; 09-29-15, 06:48 AM.Highly caffeinated
http://www.coffeehouseexpress.com
Comment
-
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.
Originally posted by Jim Cockerham View PostHere 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:
Code:<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>
Code:<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
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>
Comment
-
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:
Code:jsSFNT: function () {
Code:$.ajax({ cache: true, crossDomain: true, dataType: 'script', url: '../js/jquery.slick.min.js' }).done(function () { $('#js-hero').slick({
Then what I did was add a new ReadyTheme content section using multiple hero image content (obviously you can add more than three):
Code:<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>
Code:<mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
Code:<mvt:item name="readytheme" param="contentsection( 'sfnt_carousel' )" />
Voila! Now all I have to do is change up my hero images and I'm done updating the slider.
- 1 like
Comment
-
Originally posted by titlehere View PostI 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/
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
-
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.
Comment
-
Charles Brauer - Can you supply a link to the site in question?Last edited by Matt Zimmermann; 04-11-16, 07:52 AM.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
Comment