Jump to content

Archived

This topic is now archived and is closed to further replies.

Olly

Shortcodes for opening an image with Lightbox

Recommended Posts

Olly

I am trying to use lightbox on this page: http://www.maryqueenofscots.net/family-trees-of-the-scottish-familys-in-the-16th-century/the-tudor-succession/

 

Unfortunately I don't know the shortcodes that are needed to make lightbox work. What I want is that when you click on the image it opens another one which is much larger using lightbox. Essentially, I want exactly the same effect as when you click on a thumbnail in the 'PopThumbs' section. I would have used that section except that I wanted the preview image to be the width of the page.

 

Can anyone explain how to do this?

 

(Also, on a completely unrelated note, can anyone tell me why I have so much padding around each element. I have set the sections padding to 0px and there are no additional <p> or <br> tags anywhere. Why so much space?)

Share this post


Link to post
Share on other sites
Danny

HI,

 

In order to have an image open a larger or different image using a LightBox effect, you will need to use a plugin, I recommend you search the Wordpress plugin repo.

 

In regards to your padding question, the padding option is related to the section area and doesn't not effect the padding that used on or inside a section. All sections have some form of padding and margin, without them they would look rather odd.

 

If you're not happy with the padding on a specific section you can remove it using custom CSS. Another alternative would be to use Nicks Classy plugin, which you can get from here - http://betterdms.com/2013/09/14/free-css-plugin-classy-from-pagelines-devcamp/


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Olly

But isn't Lightbox built in to Pagelines? How does the "PopThumbs" section do it? Can't I just do it the same way?

Share this post


Link to post
Share on other sites
Danny

You can, but there is no shortcode for that and it would be quite a lot of messing about, as far as I know.

So the simplest method would be to use a plugin.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Olly
I see. Does it just use Lightbox? If I get the regular Lightbox plugin, will it produce the same effect?

Share this post


Link to post
Share on other sites
Olly

Well I've done some searching but so far I haven't had much luck. Does anyone know of a free lightbox plugin that will open a larger version of the displayed image, with an option to go full screen from the image. I essentially want exactly the same effect that the PopThumbs sections gives me except that I want to click on a larger image?

 

I have added the PopThumbs section here to show you what I need: http://www.maryqueenofscots.net/family-trees-of-the-scottish-familys-in-the-16th-century/the-tudor-succession/ - click the thumbnail under the family tree.

 

I have 32 family trees I need to display. Some of them are really complex and will only really be legible at fullscreen, whereas others could probably be viewed from the page. This is why it is so important that the image can be enlarged from the main page, and also be blown up to fullscreen. I'm building this site as a favour - the "payment" is that it helps me improve my web design, so I'd prefer not to spend more money on a plugin. :) However, if it is absolutely necessary, I will - as long as someone can recommend one that is not too expensive and does what I need. I'd prefer one where the fullscreen button is on the image itself, like in PopThumbs. Each image will be displayed on a seperate page, so a gallery function (scrolling between images) isn't strictly necessary.

 

Can anyone recommend a (preferably free) plugin that will do this? If not free, what's the most adaptable one? (If I'm going to spend the money I'd like to be able to re-use it for other projects.)

 

Alternatively, is there an easy way to make PopThumbs display the large preview image (family tree) as I have on the page? Could this be done easily with CSS? Or could I clone the section and adapt it? How hard would this be? My CSS is pretty basic but I understand the gist of it. (I've done the Code Academy course...)

Share this post


Link to post
Share on other sites
Danny

There are literally hundreds of Lightbox plugins, I did a quick search and found this article.

 

http://wedesignpixel.com/useful-effective-jquery-lightbox-plugins/

I don't really use them so I can't recommend one. However, I have seen a few Wordpress sites running the Fancybox plugin.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×