Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post

    Difficulty grouping ajax popups in colorbox with sliders

    Last night i posted about trying to work out issues adding a slider to colorbox. I found the answer with royalslider. http://www.anglehouseorthodontics.co...r-in-lightbox/ Now im having difficulty grouping my popups. I had to jump thru some js hoops to get the sliders functional and its made my js include difficult for me to make sense of.
    Usually i would use the 'rel' setting in colorbox to group items but that doesnt seem to work here.

    html
    Code:
        
        <div class="element webdesign box1">
    <a class='colorboxSlider' rel="work" href="xxxx.html">
        </div>
          
        <div class="element webdesign box2">
    <a class='colorboxSlider' rel="work" href="xxxy.html">
        </div>
    straight forward enough. But the JS is eluding me
    Code:
    <script>
    	jQuery(document).ready(function($) {
    
      // Please note that if you use mutliple sliders, you need to call RoyalSlider destroy() method when box
      // closes to destroy it's data.
      // Also if autoPlay is used, you need to pause slider on close
    
      var win = $(window),
          w,
          cContent = $('#cboxLoadedContent'),
          currRs;
      $('.colorboxSlider').on('click', function(e) {
          e.preventDefault();
          $.colorbox({
              preloading: true,
              modal: true,
              transition: 'none',
              rel:"work", 
              speed: 0,
              onComplete: function(e) {
              currRs = $('#cboxLoadedContent').find('.royalSlider').royalSlider({
                  imageScaleMode: 'fill',
                  keyboardNavEnabled: true,
                  video: {
                    autoHideControlNav: true
                  }
                }).data('royalSlider');
                updateLightboxSize();
              },
              href:$(this).attr('href')
          });
          return false;
      });
    
      win.resize( function() {
         updateLightboxSize();
      });
    
      // dynamic lightbox resizing
      function updateLightboxSize() {
          // define sze of lightbox
          w = win.width();
            w = '950px';
       
           $.colorbox.resize({
               width: w
           });
          if(currRs) {
            currRs.updateSliderSize();
          }
          // fix scrolbar space
          setTimeout(function() {
            $.colorbox.resize({
               width: w
            });
          },1);
    
      }
    });
    </script>
    One other thing im noticing is that after i close out one of my colorbox popups, the word "loading" remains behind at the bottom of my page...

    http://www.jacklmoore.com/colorbox/
    Last edited by darnen101; 08-12-2013 at 01:41 AM. Reason: one problem fixed, new one came up

  • #2
    New Coder
    Join Date
    Mar 2008
    Posts
    77
    Thanks
    15
    Thanked 1 Time in 1 Post
    bump due to change in topic


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •