Captions in another Div

craigsletterbox's Avatar

craigsletterbox

07 Apr, 2015 08:48 AM

Hi Dmitry,

I have just bought another licence from you for use on a friends site. Im trying to get the captions into another div but I'm having trouble. I know I should be using something like this $('.rsGCaption').appendTo('.your-new-container-class'); but this scripting is really not my bag! Believe me I have tried. Can you PLEASE assist me as to where to put this script.

My script is

<script type="text/javascript">
            jQuery(document).ready(function($) {
            var autoStart = true;
            var rsi = $('#full-width-slider').royalSlider({
            arrowsNav: false,
            loop: false,
            keyboardNavEnabled: true,
            globalCaption:true,
            controlsInside: false,
            imageScaleMode: 'fit',
            imageScalePadding: 0,
            arrowsNavAutoHide: false,
            arrowsNavHideOnTouch:true,
            autoScaleSlider: true,
            controlNavigation: 'bullets',
            thumbsFitInViewport: false,
            navigateByClick: true,
            startSlideId: 0,
            transitionType:'fade',
            autoPlay: {
            enabled: true,
            pauseOnHover: false,
            delay: 300
            },
            deeplinking: {
            enabled: true,
            change: true,
            prefix: 'image-'
            },
            autoPlay: {
            // autoplay options go gere
            enabled: true,
            pauseOnHover: false,
            stopAtAction: false,
            delay: 2000
            }
            }).data('royalSlider');
            $('#full-width-slider').royalSlider('stopAutoPlay');
            $('#toggleAutoPlayBtn').click(function() {
            // optionally change button text, style e.t.c.
            if(autoStart) {
            $(this).html('pause slideshow');
            } else {
            $(this).html('play slideshow');
            }
            autoStart = !autoStart;
            $('#full-width-slider').royalSlider('toggleAutoPlay');
            });
            $('#slider-next').click(function() {
            rsi.next();
            });
            $('#slider-prev').click(function() {
            rsi.prev();
            });
            });
        </script>

and my html is like this


<div class="container-fluid">
            <div class="row clearfix">
                <div class="col-md-10 column">
                    <div id="full-width-slider" class="royalSlider heroSlider rsMinW">
                        <div class="rsContent">
                            <img class="rsImg" src="images/003.jpg" alt="" />
                            <figure class="rsGCaption">painting<b/>medium<b/>price</figure>
                        </div>
                        <div class="rsContent">
                            <img class="rsImg" src="images/004.jpg" alt="" />
                            <figure class="rsGCaption">painting<b/>medium<b/>price</figure>
                        </div>

Thanks for any help you can offer.
Cheers,
Craig

  1. Support Staff 1 Posted by Dmitry Semenov on 07 Apr, 2015 02:40 PM

    Dmitry Semenov's Avatar

    You may add it directly after the initialization:

                     delay: 2000
                }
                }).data('royalSlider');
    
                // here ...
    

    And also you should have element in page with class your-new-container-class.

  2. 2 Posted by craigsletterbox on 08 Apr, 2015 02:35 PM

    craigsletterbox's Avatar

    Hi Dmitry,

    Thanks for that. it works perfectly to move the captions. Great.
    However in doing this I have found that I actually need to move the captions only on larger devices. I know I can use something like if ( $(window).width() > 768) { to limit its use but I cant seem to then format the text properly in both instances and also it is not responsive if the browser is resized.

    After researching a bit I think I can use this instead?

    <div class="rsContent">
    <img class="rsImg" src="images/007.jpg" alt=""/>
      <div class="rsCaption">
        <p>Nude against the Mountain<br>
    Watercolour and Pastel on Paper<br>
    52X34 cm</p>
    
        <p>Nude against the Mountain, Watercolour and Pastel on Paper, 52X34 cm</p>    
      </div>
    </div>
    
    
    <div class="rsContent">
    <img class="rsImg" src="images/003.jpg" alt=""/>
      <div class="rsCaption">
        
    <p>Bottles Blue<br>
    acrylic / collage on canvas<br>
    31X31 cm</p>
    
        <p>Bottles Blue, acrylic / collage on canvas, 31X31 cm, </p>    
      </div>
    </div>
    </div>
    

    But I don't understand how to separate the first and second child paragraphs's into different Divs.
    I have searched a lot and found Example
    I am after a similar caption look.

    I would like to get captions in a vertical list in a-new-container for larger devices
    and captions under the image 'inline' for smaller devices (like the above site).

    Is there a way to javascript this?
    I hope you can help me with this so I can finally finish this site!
    Many thanks,
    Cheers,
    Craig

  3. Support Staff 3 Posted by Dmitry Semenov on 08 Apr, 2015 03:02 PM

    Dmitry Semenov's Avatar
    ...
        delay: 2000
      }
    }).data('royalSlider');
    
    if( $(window).width() < 700 ) {
        $('.rsGCaption').appendTo('.your-new-container-class');
    }
    
  4. Support Staff 4 Posted by Dmitry Semenov on 08 Apr, 2015 03:04 PM

    Dmitry Semenov's Avatar

    ... you can also add some CSS class to parts of your caption and hide them via CSS media queries, e.g.:

    @media screen and (max-width: 1024px){
        .some-caption-element-class {
           display: none;
        }
    }
    
  5. 5 Posted by craigsletterbox on 08 Apr, 2015 03:18 PM

    craigsletterbox's Avatar

    Thanks Dmitry,

    So its late here and I shall have a try in the morning. Just so I'm headed in the right direction should I use this

    <div class="rsContent">
                                <img class="rsImg" src="images/003.jpg" alt="" />
                                <figure class="rsGCaption">painting<b/>medium<b/>price</figure>
                            </div>
    

    or this version

    <div class="rsContent">
    <img class="rsImg" src="images/003.jpg" alt=""/>
      <div class="rsCaption">
        
    <p>Bottles Blue<br>
    acrylic / collage on canvas<br>
    31X31 cm</p>
    
        <p>Bottles Blue, acrylic / collage on canvas, 31X31 cm, </p>    
      </div>
    

    where I need to seperate the first and second child somehow.

    Thanks a lot. I hope I wont need to bother you tomorrow.
    Cheers
    Craig

  6. 6 Posted by craigsletterbox on 13 Apr, 2015 12:30 PM

    craigsletterbox's Avatar

    Hi Dmitry,
    I have had a good crack at what you suggested but its still not working exactly right. The captions are loading correctly but only working properly one way on browser resize.
    Small to large works but not visa-versa.

    i have a few more artist friend to do sites for and would like to use RS. If I can get my head around this bit it will help a lot in the future.

    Could you please have a look (removed)

    I have added this

    
    $(document).ready(function() {
                    var $window = $(window);
                    function checkWidth() {
                    var windowsize = $window.width();
                    if (windowsize > 1036) {
                    $('.rsGCaption').appendTo('.newcaps');
                    }
                    }
                    // Execute on load
                    checkWidth();
                    // Bind event listener
                    $(window).resize(checkWidth);
                    });
    

    which makes it work one way on resize but not the other.

  7. Support Staff 7 Posted by Dmitry Semenov on 13 Apr, 2015 02:57 PM

    Dmitry Semenov's Avatar

    appendTo should be executed only one, but you're firing it each time browser resizes (& window width is more than 1036px).

    Dmitry

  8. 8 Posted by craigsletterbox on 27 Apr, 2015 03:12 PM

    craigsletterbox's Avatar

    Hi Again Dmitry,
    I had a go at all that but for now its a little too much for me. I may come back to this on my next project but for this one I'm going to try and keep it simple.

    I have updated this site and am now putting the captions only below the slider. One Problem. On a phone (iphone) and an old 17" macbook it looks good. However on a 15' macbook the caption gets lost of the bottom of the screen. I guess this is also happening on other devices.

    I think I can possibly solve this with a long series of media queries but is there a simple way of keeping everything visible in the browser window on all screens. Maybe something simple with the slider or some CSS?

    Many Thanks again for your help and your great slider.
    Cheers,
    Craig

  9. 9 Posted by craigsletterbox on 27 Apr, 2015 03:16 PM

    craigsletterbox's Avatar

    Sorry I think that link was wrong!

  10. Support Staff 10 Posted by Dmitry Semenov on 27 Apr, 2015 06:29 PM

    Dmitry Semenov's Avatar

    Hello,

    You may set any size to slider at any time, refer to http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-str... , there are examples at the bottom.

  11. 11 Posted by craigsletterbox on 29 Apr, 2015 02:10 PM

    craigsletterbox's Avatar

    Hi Again,
    Thanks for that. I ended up fixing it by adding a little padding to the bottom of the slider on larger devices. It was only a problem on mid-size laptops but this seems to have fixed it.

    One last thing (I hope!).
    For performance I have changed the image URL by modifying rsImg sources like so...

    jQuery(document).ready(function($) {
                if($(window).width() <= 810) {
                $('.rsImg').each(function() {
                $(this).attr("href", $(this).attr("href").replace('1200', '900'));
                });
                }
    
    Its working as intended but now I need to limit the size of the smaller image so that it is not scaled up bigger than its original size.

    I think I have read just about everything you ever posted on this subject from knowledge base to forums! Maybe I'm just a bit slow but I cant find a way to limit the resizing of these images. I found an interesting post here but I still can't make it work (and I'm not using wordpress)

    Just to be clear again I want to:
    Limit the scaling of smaller images to their original dimensions on window resize so they won't look rubbish.

    I have got autoScaleSlider: true, set but I am hoping that wont be a problem? If I don't set it it breaks my layout.

    Is there a way to do this with java or something . Using css it is being overridden by something but I cannot understand what.

    What more can I tell you? Its the last piece of the puzzel for me. PLEASE PLEASE can you help. Our time difference is killing me so a detailed bit of help would be very much appreciated. As I say I have already read all the documentation etc. I'm just stuck on this bit.

    You're a legend. Thanks.

  12. Support Staff 12 Posted by Dmitry Semenov on 29 Apr, 2015 02:30 PM

    Dmitry Semenov's Avatar

    If you set scale mode to fit-if-smaller, image won't be resized larger than original http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/how-to-...

  13. 13 Posted by craigsletterbox on 29 Apr, 2015 03:04 PM

    craigsletterbox's Avatar

    Well there you go!! I told you I might be a bit slow! You would not believe the hours I have spent fooling around with that. THANK YOU.

    It works great. I have uploaded another small size test image and the only problem is that when the browser is resized from small to large the small image remains at the top because I have set....

                            .rsImg {
                margin-top: 10px !important;
                }
    

    The layout then looks disjointed in this scenario. Is it possible to override this issue just for these circumstances?

    Thanks again for all your help.
    Craig

  14. Support Staff 14 Posted by Dmitry Semenov on 29 Apr, 2015 04:26 PM

    Dmitry Semenov's Avatar

    If you want to apply margin – apply it whole slider (.royalSlider). Or apply all the image scaling just via CSS by yourself.

  15. 15 Posted by craigsletterbox on 30 Sep, 2016 09:24 AM

    craigsletterbox's Avatar

    Removed links and made public. May help someone.
    Thankyou

  16. craigsletterbox closed this discussion on 30 Sep, 2016 09:24 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