Adding Lightbox

This tip applies to HTML templates. In case you use a CMS, you should rather use one of the available extensions.

The Lightbox effect is a really cool Artisteer feature that enables you to enrich your projects with image galleries. But Artisteer's Lightbox is not as impressive as the real one. Wouldn't it be nice to have a gallery with the real Lightbox? In this tip, I will show you how to modify the code, to get the gallery with real Lightbox. In this example, we will use the betterImageGallery.artx project file.

Note

Lightbox is the generic name for the group of techniques that display images using modal dialogs. The name comes from original JavaScript plugin, created by Lokesh Dhakar (for more information, visit http://lokeshdhakar.com/projects/lightbox/). Lightbox-like scripts show images in a nice border, with navigation controls and description text.

We will use the Lightbox2 effect, based on the jQuery library. There are many Lightbox-like effects available, but this one is quite powerful and easy to use. Artisteer uses jQuery for its own Lightbox effect and attaches this library to exported projects by default, so it is a good idea to use an effect based on this library. Here is our procedure:

  1. Before we start, we need to prepare some additional files. Artisteer will include the jQuery library, but we need our Lightbox2 effect. You can download it for free from its author website http://lokeshdhakar.com/projects/lightbox2/. Go to this page and download the file. This will be a ZIP archive, containing several folders and files. Not all of these files are really needed, but for simplicity just extract the archive. You will get a Lightbox folder.
  2. The installation package contains not only the necessary files, but also an example page, jQuery library, and some example images. If you want to have only what you really need, you can delete the unnecessary files and keep only the files appearing in the scheme shown in the following screenshot:
    Adding Lightbox
  3. The second asset we need are the images we want to show in our gallery. For this example, I have prepared a simple images packet into the ZIP archive. Unzip the galleryImages.zip file. You should have the galleryImages folder with eight simple images inside.
  4. Now, when we have prepared the additional files that we need, start Artisteer and open the betterImageGallery.artx project file. You will see that it's just a one-page template, with eight empty cells in the content area. The concept of an image gallery using Lightbox is that the thumbnails of images are displayed on the page. Each thumbnail is a link to the corresponding big image. Without Artisteer, we would need to prepare thumbnails of our images, but we don't have to worry about this, as Artisteer will correctly resize each image while inserting them into cells.
  5. Put one image from our collection in each cell. Your project should look similar to the one shown in the following screenshot:
    Adding Lightbox

    Initial state of our gallery where we have thumbnails in cells in content area

  6. Now export the project into a folder, giving it the name ImageGallery. Open this folder and double-click on the index.html file to view the site in the browser.
  7. By default, every picture has the Lightbox effect enabled. Because we are going to replace Artisteer's Lightbox effect with another one, we need to turn it off. Go back to Artisteer, press the right mouse button on every image, choose the Image Options option from the content menu, and in the Image Options window set the value of the Preview field to No.
    Adding Lightbox

    We need to turn off the Lightbox effect for each image in the gallery

  8. Export the project once again, under the same name and location, overwriting any previous files.
  9. Open this folder and double-click on the index.html file to display our site in the browser. Make sure that the Lightbox effect is disabled for any thumbnail in our gallery. If you have missed to disable this effect for any picture, go back to Artisteer, disable it, and export the project one again, overwriting the previously exported files.
  10. Open the folder with the exported template and go to the images folder. This is the standard Artisteer-generated template folder that contains all the graphic files used in the project. Notice that while inserting the image into our project, Artisteer did not only adopt the size of the original image to the target dimensions (cell), but also made a copy with a thumbnail. We now have two copies of each image of our gallery, that is, a thumbnail (that is actually displayed in cell), and its corresponding image, in the original size. The naming conventions of the generated images are as follows:

    Thumbnail

    Original image (bigger one)

    1.jpg

    1-large.jpg

    2.jpg

    2-large.jpg

    • Now it's time for an explanation as to why we had to export the template twice. Any image that we put into the Artisteer project has the Preview (the Lightbox effect) property set as Yes by default. While we were exporting the project the first time, this option was enabled for all the images. This made Artisteer to create a thumbnail for each image as well as to preserve the original, bigger images (the thumbnail is displayed on the page, and the bigger image is displayed in the Lightbox effect). Then we disabled the Lightbox effect for all the images and exported the project again, overwriting files. If the Lightbox effect is disabled, there is no need to preserve the bigger images, and Artisteer did include them in the exported files. Most of the files were overwritten, but because the location of the exported project didn't change, the old files remained. You may check the date of creation of the files. You will notice that the bigger images are a little older, because they come from our first export, while the smaller ones were overwritten during the second export. With this trick, we have the Lightbox effect disabled, but we still have every image in two versions, as a thumbnail and in its original size.
    • Now it's time to transform our thumbnails into links pointing to their corresponding, bigger images.
  11. Press the right mouse button on the first image in Artisteer, and from the content menu choose the Edit Hyperlink… option. This will open the Image Options window with the Link tab enabled. In the Address: field, we need to type the relative path to the corresponding bigger image of the current thumbnail (take a look at the previous table to check the names of the corresponding images in our gallery).

    As all the image are stored in the images folder, we need to start the path with the folder name according to the pattern Folder name/bigger-image-name.

    We are working with the 1.jpg file (first thumbnail), so in this case, we should type images/1-large.jpg.

    Adding Lightbox

    We type the path to the original size image

    Repeat this procedure for each image. Export the project again, overwriting the previously exported files.

  12. Open our site in the browser. The gallery works, although there's no Lightbox effect yet. When you click on a thumbnail, you are redirected to the page showing the bigger version of image.

    Note

    If you have problems in this step (after clicking on the thumbnail, there is an error instead of the bigger image being displayed), go back to Artisteer, edit the Link properties, and make sure that the value of the Address: field doesn't begin with the / character. If so, remove it. For some reason, if the address of a link starts with /, Artisteer adds .html to the address. For example:

    • right: images/1-large.jpg
    • wrong: /images/1-large.jpg
  13. Before we enable the Lightbox2 effect (that will demand us to modify exported code), let's add picture descriptions. Lightbox2 allows you to add a description to the images. Let's assume we want to add the text This is the first image of our gallery as the description for the first image.
  14. To do that, press the right mouse button on the first thumbnail, and from the content menu select the Edit Hyperlink… option again. Then just type your description in the Screen Tip: field in the Image Options window as shown in the following screenshot:
    Adding Lightbox

    Adding a description to the image

    Repeat the procedure, giving each image an appropriate description.

    The last thing we can do in Artisteer is set up a correct rel attribute for any link in our gallery. Lightbox2 works only with pictures that have the setting rel="Lightbox[galleryName]".

    Note

    This feature makes it possible to have more than one gallery on a page. Each picture is displayed with navigation arrows, allowing the user to switch to the next or previous image. galleryName in square brackets identifies the image as belonging to a particular gallery. This name is up to you. If you have more than one gallery on your page, set a proper galleryName in rel attribute for every image. This will inform Lightbox where a particular gallery ends and where another one starts.

  15. To do that, click on any thumbnail and then on the HTML button on the ribbon (it's on the Edit tab). The HTML editor will appear, presenting the source code of our content area. Look for the link of our first thumbnail (if you're not sure what you are looking for, just look for the thumbnail's filename). Find the fragment of code that looks like the following:
    <a href="images/1-large.jpg" title="This is the first image of our gallery">
  16. Place the cursor to the right of the title attribute and add in:
     rel="Lightbox[myGallery]"
  17. You should now have the following:
    <a href="images/1-large.jpg" rel="Lightbox[myGallery]"title="This is the first image of our gallery">
  18. Repeat this operation for all the links in our gallery (remember that we have eight images). Click on the OK button to close the editor window. Export the project overwriting the previously exported files.
  19. The last thing is to modify the exported code and to enrich our site with the real Lightbox effect. Open the folder with the exported project and copy the entire Lightbox folder we prepared before to this folder. Then edit the index.html file and find the part of the code where jQuery is attached. We are looking for the following line (near the beginning of the file):
    <script src="jquery.js"></script>
  20. Just below this line (make some space if needed), put the following code:
    <!-- we add Lightbox effect -->
<link rel="stylesheet" href="Lightbox/css/Lightbox.css" />
<script src="Lightbox/js/Lightbox.js"/>
<!-- end of our modifications -->
  21. Save the file and double-click on the index.html file. Our gallery should work as expected, but the close and loading images are missing. To fix this, just copy or move the close.png and loading.gif files from the Lightbox/images folder to our template images folder (from the ImageGallery/Lightbox/images directory to the ImageGallery/images directory).

That was the last thing to do. You should now see our project with beautiful, Lightbox2 effect image gallery with smooth display effect, navigation arrows, and image descriptions

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.118.140.204