🔑 Login
SpaceNode Web Publishing Software
 

Picture Lightboxes In SpaceNode

Picture Lightboxes In SpaceNode

Video tutorial Video Tutorial and step-by-step guide to creating light boxes which are attractive ways of displaying popup images.

A node owner who saw my BMW F650GS Motorbike Review contacted me to find out how I converted the thumbnail images in the article into "lightboxes" which when clicked expand to fill the screen.

This step-by-step guide will teach you how to add lightboxes to your articles and pages.

Click this image to find out what a lightbox looks like when applied to "Mr Pig":

Mr Pig - Small Size

Online Video Tutorial

To begin playback, click the play button

Step-by-Step Instructions

Another example of a lightbox - click the thumbnail to be shown full-size image:

Alex Kent Lightbox Example

1) Save your image in two sizes:

  • 1st will be viewable on the webpage (small)
  • 2nd will be viewable when clicked (full-size)

The reason why you create two files is so that your page loads up fast for people who have slow internet connections. If you use the same full-sized image for your thumbnail and lightbox then your users will think you've got a very slow website!

Note: 99% of computers come pre-installed with software for resizing images and there are also countless "online image resizers"

2) In the editor (Article or Page – it doesn't matter), click on the "HTML" button to enter HTML mode. At the top, copy and paste this HTML:

<style><!--

@import url(/dc_includes/jquery/fancybox/jquery.fancybox.css);

--></style>

<script type="text/javascript">// <![CDATA[

$(document).ready(function() {

$.requireScript('/dc_includes/jquery/fancybox/jquery.fancybox-1.2.1.pack.js', function() {

$(".popup_picture").fancybox();

});

});

// ]]></script>

Click the "update" button to close the HTML window.

3) In the editor, click the 'Insert Image' button. In the "Image URL" field, paste the URL to the small image or use the image picker which is the "browse files" icon next to the field.

Enter an image description and title and then click "Insert":

Insert image example

4) Right-click on the image and choose "Insert/Edit Link".

In the 'Link URL' field, enter the URL to the full-sized image or use the image picker which is the "browse file"' icon next to the field:

Insert/Edit link

On the 'Advanced' tab in the same dialog, in the "Classes" field enter "popup_picture", click the "Insert" button and then save the page or article:

Insert/Edit link - advanced tab

You will now have created your very first lightbox image!

    
Comments
SpaceNode Documentation