Announcement

Collapse
No announcement yet.

Simple Lightbox Integration

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

    Simple Lightbox Integration

    Since it was asked about recently I have quickly knocked together this to show one way you can intergrate Lightbox into Actinic. There are a few ways to do it but I found this the easiest, feel free to add tips etc if you have any!

    1. Download Lightbox and extract the contents
    2. Copy all the files (excluding index.html) into your site directory, making sure you do not copy the folder structure, just the physical files. By the end you should have copied a number of images, a css file and 4 js files directly into your site folder
    3. Open lightbox.js in a text editor. You will find image references in there that currently point to "images/close.gif' etc. Go through the file and remove every instance of "images/" you find, leaving just the reference to the actual image file in place. Then open lightbox.css and remove all references to '../images/' within the file.
    4. Open Actinic and navigate yourself to your head section then add this code
    Code:
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js?load=effects"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    below
    Code:
    <script language="JavaScript" src="actiniccore.js" type="text/javascript"></script>
    <script language="JavaScript" src="actinicextras.js" type="text/javascript"></script>
    5. Then add
    Code:
    <link rel="stylesheet" href="lightbox.css" type="text/css" media="screen" />
    after
    Code:
       <link href="actinic.css" rel="stylesheet" type="text/css" />
    5. Add all the lightbox files to Design | Additional Files, they should be as follows (unchecked):-

    lightbox.css
    blank.gif
    close.gif
    closelabel.gif
    loading.gif
    next.gif
    nextlabel.gif
    prev.gif
    prevlabel.gif
    effects.js
    lightbox.js
    prototype.js
    scriptaculous.js

    That's the code ready to be used, now all you need to do is intergrate it into the Actinic layouts. For this, we set up a block that looks for the text 'Lightbox' within the extended information text box, if it is found it uses the lightbox code if not it uses the standard pop up box. This allows you to control whether a pop up box or lightbox is used depending on what text is entered into this box.

    Integrating into the Product layouts:-

    1. Go to Design | Library | Layouts
    2. Open the layout called Standard Product Image
    3. Replace everything in this layout with the code below
    Code:
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
       <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20a%20Pop%2dUp%20Window%22%20AND%20%3cactinic%3avariable%20name%3d%22ExtendedInfoText%22%20%2f%3e%20%21%3d%20%27Lightbox%27" >
          <a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
       </actinic:block>
       <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInfoText%22%20%2f%3e%20%3d%3d%20%27Lightbox%27">
        <a title="<actinic:variable name="ProductName" />" rel="lightbox" href="<actinic:variable name="ExtendedInfoImage" />">
       </actinic:block>
       <actinic:block if="%3cactinic%3avariable%20name%3d%22ExtendedInformationType%22%20%2f%3e%20%3d%3d%20%22Opens%20in%20the%20Same%20Window%22" >
          <a href="<actinic:variable name="ExtendedInfoPageName" />">
       </actinic:block>
    </actinic:block>
    
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e">
       <img src="<actinic:variable name="ProductImageFileName" />"
          border="0"
          width="<actinic:variable name="ProductImageWidth" />"
          height="<actinic:variable name="ProductImageHeight" />"
          alt="<actinic:variable name="ProductName" encoding="strip"/>" />
    </actinic:block>
    
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsProductImageDisplayed%22%20%2f%3e%20%3d%3d%20False">
       <img src="<actinic:variable name="DefaultProductImage" />"
          border="0"
          alt="<actinic:variable name="ProductName" encoding="strip"/>" />
    </actinic:block>
    
    <actinic:block if="%3cactinic%3avariable%20name%3d%22IsPopUpDisplayedByImage%22%20%2f%3e">
       </a>
    </actinic:block>
    The code will display the product name within Lightbox, you can change this to something else if you want though.

    That should be you. To implement create your extended info pages as normal, making sure you include the image you want to display, and if you want to use Lightbox, simply type 'Lightbox' into the Extended Information text box. If you intend to use Lightbox exclusively and have no plans for pop up boxes you can simplify it by just overwriting the standard pop up code
    Code:
    <a href="javascript:ShowPopUp('<actinic:variable name=ExtendedInfoPageEncoded />',<actinic:variable name="ExtInfoWindowWidth" />,<actinic:variable name="ExtInfoWindowHeight" />);">
    with
    Code:
    <a title="<actinic:variable name="ProductName" />" rel="lightbox" href="<actinic:variable name="ExtendedInfoImage" />">
    This will mean that you won't need to type 'Lightbox' into the extended info box to make it work, but it does mean pop ups wont work anymore so be careful!

    There are numerous other ways to do this, this is just how I chose to so please have a play around and see if you can come up with something better. If you want to view this offline you will need to copy all images, css and js files to the PreviewHTML directory

    Also, take a snapshot before you try anything and note that i typed this up quite quickly, if you find any mistakes give me a shout and I will update the code!

    Want to display multiple product images? See Norman's suggestion below (post 6)
    Cheers

    David
    Located in Edinburgh UK

    http://twitter.com/mcfinster

    #2
    Great stuff Dave, nicework and added to my snippets

    Many thanks
    Daren
    Affordable solutions for busy professionals.
    Website Maintenance | UK Web Hosting

    Comment


      #3
      Thanks for sharing. One for the AUG I reckon.

      Comment


        #4
        A few observations.

        You need to edit lightbox.css and remove all ../images/from the definitions.

        You need to make an extra copy of all the images, effects.js and scriptaculous.js into PreviewHTML.
        Norman - www.drillpine.biz
        Edinburgh, U K / Bitez, Turkey

        Comment


          #5
          Norman,

          Yep as ever correct, I forgot to include the css change, I will amend the above code. And as you say, if you want to view offline you will need to copy all of them to PreviewHTML. Thanks for that!

          I'm also sure there is a better way to selectively control the display of the code instead of using a block to check for 'Lightbox'. If anyone has any ideas then please do post them.
          Cheers

          David
          Located in Edinburgh UK

          http://twitter.com/mcfinster

          Comment


            #6
            An alternative for multiple images would be to create Product level variables of type Filename (check Allow blank) called Lightbox-1 through Lightbox-4 and then add this code to your Product Layout.

            Code:
            		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d1%22%20%2f%3e%20%21%3d%20%22%22">
            		<a href="<actinic:variable name="Lightbox-1" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 1</a>
            		</actinic:block>
            		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d2%22%20%2f%3e%20%21%3d%20%22%22" >
            		<a href="<actinic:variable name="Lightbox-2" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 2</a>
            		</actinic:block>
            		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d3%22%20%2f%3e%20%21%3d%20%22%22">
            		<a href="<actinic:variable name="Lightbox-3" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 3</a>
            		</actinic:block>
            		<actinic:block if="%3cactinic%3avariable%20name%3d%22Lightbox%2d4%22%20%2f%3e%20%21%3d%20%22%22">
            		<a href="<actinic:variable name="Lightbox-4" />" rel="lightbox[<actinic:variable name="ProductID" />]">View 4</a>
            		</actinic:block>
            Norman - www.drillpine.biz
            Edinburgh, U K / Bitez, Turkey

            Comment


              #7
              Nice one Norman, I'll add a note above about that!
              Cheers

              David
              Located in Edinburgh UK

              http://twitter.com/mcfinster

              Comment


                #8
                Another important bit (or you'll overwrite your home page).

                When unzipping Lightbox into your Site folder make sure you rename index.html to something like LightBoxInfo.html otherwise Actinic will upload it and clobber your home page.
                Norman - www.drillpine.biz
                Edinburgh, U K / Bitez, Turkey

                Comment


                  #9
                  I could make a variation on my Multi Product Images to use Lightbox. See http://www.drillpine.biz/v8lightbox/acatalog/Books.html for a demo. Here the small icons are automagically created from the big images and are only 1Kb in size.
                  Norman - www.drillpine.biz
                  Edinburgh, U K / Bitez, Turkey

                  Comment


                    #10
                    Looks great Norman, be a great addition to many sites, especially ones selling prints etc!
                    Cheers

                    David
                    Located in Edinburgh UK

                    http://twitter.com/mcfinster

                    Comment


                      #11
                      Lightbox 2?

                      I've tried this twice now, and both times, the closest i've managed is to get the image to open in the same window.

                      Could it be because im using lightbox 2 instead of 1?
                      http://www.itwiz.co.uk

                      http://www.AntiV.net - The Discount Antivirus Store

                      Comment


                        #12
                        I use Ligthbox2 on my Lightbox add-on. See http://www.drillpine.biz/v8lightbox/acatalog/Books.html for a demo. This is a considerable extension of this thread in that it automatically generates scaled down icons and has is easy to add to Actinic and use.
                        Norman - www.drillpine.biz
                        Edinburgh, U K / Bitez, Turkey

                        Comment


                          #13
                          Just wanted to add an important note about the post here, the files you need to copy across must also include 'builder.js'.

                          Also the full line is:

                          <script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>

                          not

                          <script type="text/javascript" src="scriptaculous.js?load=effects"></script>


                          I used this for standard links (not extended info)

                          Also to stop Actinic complaining about errors I uploaded the scripts manually to a separate folder ie 'js'

                          so the line would then be:

                          <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
                          Web design Bradford

                          Comment


                            #14
                            Darren, are you sure that builder.js is needed? If you look at my example site http://www.drillpine.biz/v8lightbox/acatalog/Books.html it works just fine without it.
                            Norman - www.drillpine.biz
                            Edinburgh, U K / Bitez, Turkey

                            Comment


                              #15
                              Originally posted by NormanRouxel View Post
                              are you sure that builder.js is needed?
                              Isn't that from an older version of the script? I think the newer versions have removed that .js (or included it into another)


                              Bikster
                              SellerDeck Designs and Responsive Themes

                              Comment

                              Working...
                              X