Editing the Lightbox

7 posts from 2 voices

• Started 1 year ago by rumblefish
• Latest reply from Dude
• This topic is not a support question

Tags:

No tags yet.

1. 

   rumblefish
   Member

   Hey Dude/Chris

   A couple of questions about the Prettyphoto Lightbox.

   1. How can I turn off the thumbnails displayed over the main image in the lightbox?

   2. Is it possible to remove the expand button? It looks very similar to the close button. I'd rather get rid of it altogether.

   3. Is there a simple way to edit the overall design of the lightbox? It seems to have a few different styles built into it, but I don't know how to change to a new one (eg square corners instead of rounded).

   Thanks again!
   rich

   Posted 1 year ago #
2. 

   Dude
   Dude

   Hey,
   You can change the lightbox settings in js/avia.js. Open up the file and search for following line:
   

   elements.prettyPhoto({ "theme": 'premium_photo', 'slideshow': 5000 }); /* facebook /light_rounded / dark_rounded / light_square / dark_square */

   1) You can replace "premium_photo" with other skins like "facebook", "light_rounded", etc.

   2) You can remove the thumbnail gallery by adding: overlay_gallery: false - the code would look like:

   elements.prettyPhoto({ "theme": 'premium_photo', 'overlay_gallery': false, 'slideshow': 5000 }); /* facebook /light_rounded / dark_rounded / light_square / dark_square */

   3) You can add allow_resize: false to disable the resize feature. The code would look like:

   elements.prettyPhoto({ "theme": 'premium_photo', 'overlay_gallery': false, 'allow_resize': true, 'slideshow': 5000 }); /* facebook /light_rounded / dark_rounded / light_square / dark_square */

   Posted 1 year ago #
3. 

   rumblefish
   Member

   Thanks Dude. I had to remove the expand button with some css in the end. The allow-resize: false command doesn't keep large images contained within the browser window.

   One other thing - I need to open a video in the lightbox. How do I create an html hyperlink to do that?

   Also, is there a way to make the featured images that open embedded videos in a slideshow window, open them in the light box instead?

   Thanks

   Posted 1 year ago #
4. 

   Dude
   Dude

   Sample codes for all supported servives/video formats can be found here: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/ (scroll down to the demo section).

   2) I'm not sure but I think you can use the "Link manually" option and enter a youtube/vimeo video url there. Shoutbox will automatically apply the lightbox effect to it.

   Posted 1 year ago #
5. 

   rumblefish
   Member

   That's what I was looking for!

   Thanks a lot Dude!

   :O)

   Oh wait, one last thing, sorry! How do I get rid of the "undefined" description in the lighbox? What do I have to add to the hyperlink to give the video a title in the lightbox (or remove it completely)?

   Posted 1 year ago #
6. 

   rumblefish
   Member

   I think I found it here:

   http://forums.no-margin-for-errors.com/discussion/454

   You have to add rel="prettyPhoto[inline]" and then title="Title goes here".

   Is that right? Seems to work ...

   Posted 1 year ago #
7. 

   Dude
   Dude

   You can hide the description with:

   .pp_description {
   display: none !important;
   }

   You can see the complete link structure at the demo page - it's a bit confusing:
   

   <a href="images/fullscreen/2.jpg" rel="prettyPhoto" title="This is the description"><img src="images/thumbnails/t_2.jpg" width="60" height="60" alt="This is the title" /></a>

   Basically the link title is used as description and the image alt tag as title xD.

   Posted 1 year ago #

RSS feed for this topic

Reply

You must log in to post.