Announcement

Collapse
No announcement yet.

Colossus Hero Roundabout

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

    #16
    Hi Scott,

    Those lines are part of the documentation [ https://docs.miva.com/readytheme-sha...ml#hero-slider ].
    Matt Zimmermann
    Front-End Development Director / Miva, Inc.

    Comment


      #17
      They appear to be wrong, or should NOT be there?

      Following this thread, I got the impression that these instructions were going to be removed because they are obsolete. That hasn't been done yet?
      What help do you need today!
      Interactive Design Solutions http://www.southbound.com
      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
      My T-shirt Collection is mostly MivaCon T-shirts!!
      Competitive Rates, Popular Modules, and Integrations:
      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

      Comment


        #18
        At the moment, it would all depend on which ReadyTheme you were using. That being said, this will all change with the release of the next version of Shadows as the build process is different and, at least at first, it will not be shipping with Roundabout.
        Matt Zimmermann
        Front-End Development Director / Miva, Inc.

        Comment


          #19
          I am using Colossus, which as far as I can tell pointed to the Shadows documentation for this. Once I realized where the link was I just clicked. I could not find "extensions" in CSS Resources and finally went to the forum -- this thread.

          Scott
          What help do you need today!
          Interactive Design Solutions http://www.southbound.com
          MivaMerchant Business Partner | Certified MivaMerchant Web Developer
          My T-shirt Collection is mostly MivaCon T-shirts!!
          Competitive Rates, Popular Modules, and Integrations:
          Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

          Comment


            #20
            Current and next. Right now, there is no build process for the ReadyThemes.
            Matt Zimmermann
            Front-End Development Director / Miva, Inc.

            Comment


              #21
              Hey Matt,

              Where is the best source of feature info about configuring roundabout? Now that I have it working, I need to know if I can actually use it. Autostart and delay aren't enough and I am guessing there are other nice features?

              Thanks.

              Scott


              What help do you need today!
              Interactive Design Solutions http://www.southbound.com
              MivaMerchant Business Partner | Certified MivaMerchant Web Developer
              My T-shirt Collection is mostly MivaCon T-shirts!!
              Competitive Rates, Popular Modules, and Integrations:
              Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

              Comment


                #22
                lesliekirk - That's the plan.

                ids - Unfortunately, there really aren't any features included with Roundabout. It was intended to be very simple. If a developer is looking for more options, I usually recommend using Slick, which ships in Colossus. As for the Roundabout options, these are the ones available.
                Code:
                You can pass the following settings to change the elements being called by the function:
                
                autoStart: false \\ [Boolean] - Set to `true` for automatic cycling
                carouselDelay: 5000 \\ [Integer] - Set delay between slide display for automatic cycling
                group: false \\ [Boolean] - Set to `true` to create grouping of elements based on breakpoint
                groupClass: 'x-carousel__item' \\ [String} - Set the class to be used for element groups
                groupTiny: 2 \\ [Integer] - Set number of elements to show on screens < 640px
                groupSmall: 2 \\ [Integer] - Set number of elements to show on screens between 640px and 767px
                groupMedium: 4 \\ [Integer] - Set number of elements to show on screens between 768px and 959px
                groupLarge: 4 \\ [Integer] - Set number of elements to show on screens between 960px and 1439px
                groupWide: 4 \\ [Integer] - Set number of elements to show on screens >= 1440px
                groupWrapper: 'figure' \\ [String} - Set element to wrap groups with
                
                $.hook('carousel').roundabout({
                    autoStart: false,
                    carouselDelay: 5000,
                    group: false,
                    groupClass: 'x-carousel__item',
                    groupTiny: 2,
                    groupSmall: 2,
                    groupMedium: 4,
                    groupLarge: 4,
                    groupWide: 4,
                    groupWrapper: 'figure'
                });
                Matt Zimmermann
                Front-End Development Director / Miva, Inc.

                Comment


                  #23
                  Ok, thanks. I wish I would have known before. This is a non-starter. It doesn't look like there is any fade type of capabilities for example.

                  So, Slick...any instructions for integrating with the RT like there is with roundabout? I imagine the template containing the images is similar?

                  Scott
                  What help do you need today!
                  Interactive Design Solutions http://www.southbound.com
                  MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                  My T-shirt Collection is mostly MivaCon T-shirts!!
                  Competitive Rates, Popular Modules, and Integrations:
                  Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                  Comment


                    #24
                    No instructions for making a hero slider in the current line of ReadyThemes. You should be able to use a reference from Levels for the basic layout/function and then make modifications as needed.

                    https://www.miva.com/forums/forum/de...age-slide-show

                    https://www.miva.com/forums/forum/de...-into-a-slider
                    Matt Zimmermann
                    Front-End Development Director / Miva, Inc.

                    Comment


                      #25
                      Thanks Matt.

                      Next important question. Slick is already running on the storefront -- featured products is default.

                      When adding a hero slider do I add a separate block of code for the hero-slider?

                      Code:
                              
                      $.loadScript(theme_path + 'plugins/slick/slick.min.js', function () {
                      $.hook('featured-products').slick({
                      ...
                      });
                      $.hook('hero-slider').slick({
                      ...
                      });
                      What help do you need today!
                      Interactive Design Solutions http://www.southbound.com
                      MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                      My T-shirt Collection is mostly MivaCon T-shirts!!
                      Competitive Rates, Popular Modules, and Integrations:
                      Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                      Comment


                        #26
                        That's correct Scott.
                        Matt Zimmermann
                        Front-End Development Director / Miva, Inc.

                        Comment


                          #27
                          Thanks.

                          What is wrong when the images stack instead of "slide" if you will?

                          Scott
                          IDS
                          What help do you need today!
                          Interactive Design Solutions http://www.southbound.com
                          MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                          My T-shirt Collection is mostly MivaCon T-shirts!!
                          Competitive Rates, Popular Modules, and Integrations:
                          Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                          Comment


                            #28
                            That sounds like it might be a styling issue, assuming there aren't any JavaScript errors being reported.
                            Matt Zimmermann
                            Front-End Development Director / Miva, Inc.

                            Comment


                              #29
                              no js errors. Same with and without the div wrapper.

                              This is the RT content template. I am guessing I am missing some code in the template?

                              HTML Code:
                              <div id="js-hero-slider" class="hero-slider">
                                 <div data-hook="hero-slider">
                                  <div><mvt:item name="readytheme" param="image( 'hero_image_01' )"/></div>
                                  <div><mvt:item name="readytheme" param="image( 'hero_image_02' )"/></div>
                                  <div><mvt:item name="readytheme" param="image( 'hero_image_03' )"/></div>
                                  <div><mvt:item name="readytheme" param="image( 'hero_image_04' )"/></div>
                               </div>
                              </div>
                              <!-- end hero-slider -->
                              The data-hook attr fixed the stacking. I guess it needs the column?
                              Last edited by ids; 03-06-20, 03:28 PM.
                              What help do you need today!
                              Interactive Design Solutions http://www.southbound.com
                              MivaMerchant Business Partner | Certified MivaMerchant Web Developer
                              My T-shirt Collection is mostly MivaCon T-shirts!!
                              Competitive Rates, Popular Modules, and Integrations:
                              Product Copy | AutoBaskets | Waitlist Integration| Wholesale Integration

                              Comment


                                #30
                                Try changing your code to:
                                Code:
                                <div class="hero-slider" data-hook="hero-slider">
                                    <div><mvt:item name="readytheme" param="image( 'hero_image_01' )"/></div>
                                    <div><mvt:item name="readytheme" param="image( 'hero_image_02' )"/></div>
                                    <div><mvt:item name="readytheme" param="image( 'hero_image_03' )"/></div>
                                    <div><mvt:item name="readytheme" param="image( 'hero_image_04' )"/></div>
                                </div>
                                <!-- end hero-slider -->
                                Matt Zimmermann
                                Front-End Development Director / Miva, Inc.

                                Comment

                                Working...
                                X