Announcement

Collapse
No announcement yet.

Photo Slideshow or Lightbox temporary fix

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

  • Glenn Vergara
    replied
    Enclose the entire CSS within this:

    Code:
    @media (min-width: 1200px) {
    
         /*CSS rules here */
    
    }
    If you adjusted the slideshow dialog width to less than 1200px, then you need to change the min-width to that dimension.

    Leave a comment:


  • Guest's Avatar
    Guest replied
    The problem is currently that this works very well on desktops, but on a phone it becomes a mess. Are we able to add some code to prevent it from loading on smaller screens?

    Leave a comment:


  • Glenn Vergara
    replied
    Originally posted by thaihung38 View Post
    Thanks Glenn. But you can add this code to css_additional.css in vbulletin template. After that, it doesn't need to use custom css in the clients. Thanks again for useful code!
    Good idea!

    Leave a comment:


  • thaihung38
    replied
    Thanks Glenn. But you can add this code to css_additional.css in vbulletin template. After that, it doesn't need to use custom css in the clients. Thanks again for useful code!

    Leave a comment:


  • Glenn Vergara
    commented on 's reply
    Thanks Mupetz for finding the script useful.

  • Mupetz
    commented on 's reply
    Thank you Glenn, very useful.

  • Glenn Vergara
    replied
    A new version of this userscript is available, v1.1. It contains a bug fix where some images were not appearing when navigating the slideshow. Click the slideshow link from my sig to get the latest version.

    Leave a comment:


  • Glenn Vergara
    replied
    I created a screencast video on how to install the Photo Slideshow user script extension on Chrome. It also shows how the bigger and better slideshow works here in vbulletin. Here is the link to the video:

    http://bit.ly/vb5sldshwvid

    Leave a comment:


  • Glenn Vergara
    commented on 's reply
    Thanks TLMD!

  • TLMD
    replied
    Very handy, thanks!

    Leave a comment:


  • Glenn Vergara
    replied
    For more control of the slideshow, I created a user script that does the same as above, plus the following:
    1. Fixes the slideshow size according to window size (slideshow automatically resizes when window is resized).
    2. Centers slideshow dialog on the browser viewport (this is the problem of the CSS fix above).
    3. Left/Right arrow keys slideshow navigation.
    This script automatically detects any vBulletin 5.x-powered forum site that is loaded on the page and run the script accordingly. It works on Firefox as a Greasemonkey script and on Chrome as an extension. You can get it on http://userscripts.org/scripts/show/175365.

    This script employs a lazy-loading technique from Google (http://googlecode.blogspot.com/2009/...-reducing.html, scroll down to "lazy" section) wherein the main script is fully commented out. This prevents the non-vB5 websites to unnecessarily parse the script which they obviously don't need.

    NOTE: If you installed the CSS fix above, you need to remove it to avoid conflict with this user script.

    Try it and enjoy!

    Last edited by Glenn Vergara; Sat 10th Aug '13, 12:00am.

    Leave a comment:


  • Glenn Vergara
    started a topic Photo Slideshow or Lightbox temporary fix

    Photo Slideshow or Lightbox temporary fix

    I'm sure there is a JIRA for the photo slideshow/lightbox being too small. It's essentially "unusable" as the images are too small to see.

    I suggest a temporary solution for end-users (while we wait for vBulletin to fix the slideshow) by adding a custom css to your browser. Here's a link on how to use a custom css in Chrome, Firefox, and Opera. http://www.lostsaloon.com/technology...a-web-browser/

    Copy and paste this code to the custom.css (Chrome), or userContent.css (Firefox).*

    *Note: thaihung38 suggested to put the CSS in css_additional.css template to avoid having the end users to edit the custom css on their browser.

    Code:
     /**
    * Custom CSS for vBulletin 5
    * Enlarges the photo slideshow in vB5. Adjust the width and height according to your needs.
    * Disclaimer: Use at your own risk. Tested with 5.0.4 only. May not work in future versions.)
    */
    .slideshow-dialog {
        width: 1200px !important;
        top: 10px !important;
    }
    
    #slideshow-dialog {
        width: 1200px !important;
        height: auto !important;
    }
    
    .slideshow .slideshow-wrapper > .jcarousel-clip-horizontal,
    .slideshow .slideshow-wrapper > .jcarousel-clip .jcarousel-item {
        width: 1200px !important;
        height: 800px !important; /* height/width = 1.5*/
    }
    
    .slideshow .jcarousel-item .image {
        max-width: 1200px !important;
        max-height: 800px !important; /* height/width = 1.5*/
    }
    
    .slideshow .thumbnails > .jcarousel-clip-horizontal {
        width: 1112px !important; /* slideshow width minus 78*/
    }
    
    .slideshow .slideshow-wrapper > .jcarousel-prev-horizontal,
    .slideshow .slideshow-wrapper > .jcarousel-next-horizontal {
        top: 50% !important;
        margin-top: -21px !important;
    }
    /* End Custom CSS for vBulletin 5 */
    Note that since this is a CSS temporary fix, the slideshow position is fixed at the top. So if you are viewing a slideshow in a post at the bottom of the thread, you have to scroll up to see the slideshow. Not good but better than having to deal with the tiny slideshow.

    See sample screenshot below:

    Click image for larger version

Name:	biglightbox2.png
Views:	67
Size:	319.0 KB
ID:	3986490






    Enjoy!

    EDIT: Better alternative solution on post #2 for forum end users.
    Last edited by Glenn Vergara; Tue 10th Dec '13, 9:44am.

Related Topics

Collapse

Working...
X