No subject

jules.webb's Avatar

jules.webb

03 Sep, 2012 11:23 PM

Hi

I'm implementing the Gallery with Fade and Vertical Thumbs ( http://dimsemenov.com/plugins/royal-slider/gallery-vertical-fade/ ) on a product page. It's working, but it's not scaling as the browser window narrows. I've made minimal customization's none of which are (or so I think) related to the scaling of the photo gallery.

I've pasted my custom css, the html, and js below. I"m hoping it's some simple oversight that I'm making. If it's easier to look at the page online let me know and I'll send you the link.

Thanks for the assist!
Jules

.rsDefault .rsOverflow, .rsDefault .rsSlide, .rsDefault .rsVideoFrameHolder, .rsDefault .rsThumbs { background-color:transparent; }

.rsDefault .rsThumbsVer { width:75px; }

.rsDefault .rsThumb { width: 75px; height: 90px; border:1px solid #FFF; }

.rsDefault .rsThumb.rsNavSelected, .rsDefault .rsThumb:hover { background-color:transparent; border-color:#CCC; }

.rsDefault .rsThumb.rsNavSelected img { opacity: 1; }

`

    <div id="gallery-2" class="royalSlider rsDefault">

          <a class="rsImg" data-rsBigImg="http://mysite.com/media/cache/139a95a728fd4cee11bfbd5bafc98a5a_matte_0_0.jpg" href="http://mysite.com/media/cache/139a95a728fd4cee11bfbd5bafc98a5a_matte_0_0.jpg"> 
            <img src="http://mysite.com/media/cache/139a95a728fd4cee11bfbd5bafc98a5a_matte_75_90.jpg"  class="rsTmb" />
          </a>

          <a class="rsImg" data-rsBigImg="http://mysite.com/media/cache/962d8a97e97a731058310b7fe61ae851_matte_0_0.jpg" href="http://mysite.com/media/cache/962d8a97e97a731058310b7fe61ae851_matte_0_0.jpg"> 
            <img src="http://mysite.com/media/cache/962d8a97e97a731058310b7fe61ae851_matte_75_90.jpg"  class="rsTmb" />
          </a>

          <a class="rsImg" data-rsBigImg="http://mysite.com/media/cache/2a7a1ac80d977ce2bc15929138056d78_matte_0_0.jpg" href="http://mysite.com/media/cache/2a7a1ac80d977ce2bc15929138056d78_matte_0_0.jpg"> 
            <img src="http://mysite.com/media/cache/2a7a1ac80d977ce2bc15929138056d78_matte_75_90.jpg"  class="rsTmb" />
          </a>

          <a class="rsImg" data-rsBigImg="http://mysite.com/media/cache/d5244a3bda940d3a1f5b6869ec9eff7a_matte_0_0.jpg" href="http://mysite.com/media/cache/d5244a3bda940d3a1f5b6869ec9eff7a_matte_0_0.jpg"> 
            <img src="http://mysite.com/media/cache/d5244a3bda940d3a1f5b6869ec9eff7a_matte_75_90.jpg"  class="rsTmb" />
          </a>

    </div>
</div>`

`

controlNavigation: 'thumbnails',
thumbs: {
  orientation: 'vertical'
},
transitionType:'fade',
autoScaleSlider: true, 
autoScaleSliderWidth: 960,     
autoScaleSliderHeight: 600,
loop: true,
arrowsNav: false,
keyboardNavEnabled: true

`

  1. Support Staff 1 Posted by Dmitry Semenov on 04 Sep, 2012 04:56 AM

    Dmitry Semenov's Avatar

    Hi,

    You need to put slider in fluid container and set to it dynamic width, e.g. 100%. Are you sure that this is done?

    Dmitry

  2. 2 Posted by jules.webb on 04 Sep, 2012 06:02 AM

    jules.webb's Avatar

    Hi Dmitry

    Yes, the container widths are percentage based. The site has a responsive layout and the rest of the elements are collapsing down around the gallery.

    The site is still in production and is in a protected directory, but if you'd like to take a look at the page I set up a temporary un and pw.
    http://eddwebb.com/product/long-sleeve-shirt.
    un: guest
    pw: 123456

    This might make it easier to see what I've done incorrectly.

    Thanks
    jules

  3. Support Staff 3 Posted by Dmitry Semenov on 04 Sep, 2012 07:17 AM

    Dmitry Semenov's Avatar

    First of this is what I get - https://skitch.com/diiiimaaaa/etmse/edd-webb Should I login somewhere else?

    Secondly, this site isn't responsive.

    Dmitry

  4. 4 Posted by jules.webb on 04 Sep, 2012 07:51 AM

    jules.webb's Avatar

    Hi Dmitry

    Sorry about that, I forgot about restricting the eCommerce section. (not going live with that right off the bat) I've resolved that as well as the responsive issue. I had to track down a missing closing bracket. So glad I got your response before I closed up for the night. Ctrl Z made that a WHOLE lot easier to find ;)

    If you wouldn't mind taking another look I really appreciate it, thanks!
    Jules

  5. Support Staff 5 Posted by Dmitry Semenov on 04 Sep, 2012 07:59 AM

    Dmitry Semenov's Avatar

    Set CSS width of slider to 100%, it's now set to 600px.

    Dmitry

  6. 6 Posted by jules.webb on 04 Sep, 2012 04:21 PM

    jules.webb's Avatar

    Figured it be something simple---can't believe I wasn't seeing that...

    thank you for taking the time!
    Jules

  7. Dmitry Semenov closed this discussion on 05 Sep, 2012 04:56 AM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac