iWeb Tip #15 – Lytebox in iWeb

80
24216

Lytebox in iWebSo I know I’ve been on this kick of the little pop-up effect in iWeb and the FancyZoom and Highslide effects I thought we’re enough, but then I came across this effect here and found it to be pretty easy to implement (easier than Highslide), I thought I’d post this one as well.  So here we go:

View Demo »

Step 1) Download Lytebox by clicking here »

Step 2) Add images to your iWeb page and make them a hyperlink (as a file) to itself (the same image).

Step 3) Publish your iWebsite to a folder, iDisk, or server.

Step 4) Add the “lytebox” folder you downloaded in step one to the site folder (not the page folder)

Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor.  I like to use Coda (by Panic Software), but you could use TextEdit (if you check on ignore rich text commands in HTML files checkbox in the preferences of TextEdit), or Espresso, TextWrangler, etc, etc, there are a bunch.  Just something that you can edit HTML in.

Step 6) Right above the </head> tag in the HTML, paste these lines of code.

<script type="text/javascript" language="javascript" src="lytebox/lytebox.js"></script>
<link rel="stylesheet" href="lytebox/lytebox.css" type="text/css" media="screen" />

Step 7) Then find where your image links are and add a rel=”lytebox” in between the link and the tittle tag. For example, here is what your looking for in the HTML:

<a href="mypage_files/my_image.jpg"  title="Image Description">

Put the rel=”lytebox” inbetween the image link and the title tag so it looks like this:

<a href="images/image-1.jpg" rel="lytebox" title="Image Description">

Step 8 ) Save and that’s it your done.  You’ll have a cool image popup effect, similar to highslide or fancyzoom, but slightly different.

Options: (If you dare :-))

Grouped Images:

If you want to have the images scroll through with a cool next and previous button to the lytebox, then instead of adding rel=”lytebox” in between the image link and title tag, add rel=”lytebox[group1]”to each image link and there will be a neat navigation to cycle through the images.  Here’s an example of what the code would look like:

<a href=”images/image-1.jpg” rel=”lytebox[group1]” title=”Image Description”>

You could have multiple sets on one page too if you change the group1 to something like group2 for all the ones you want in a seperate group and so forth.  Click the example button above for reference.

Keep in mind that the images will scroll through in the order they were dropped onto the page (not necessarily the order top to bottom that you have them in on the page.  So be sure to add images to the page in the order you want them to show up in the lytebox effect.

Lytebox Slideshow:

You can also have a little slideshow effect in the lytebox popup by using rel=”lyteshow[group1]” instead of the rel=”lytebox” (single images) or rel=”lytebox[group1]” (multiple images).  So your link code would look like this:

<a href="images/image-1.jpg" rel="lyteshow[group1]" title="Image Description">

iFrame Content in Lytebox:

If instead you want a webpage in the lytebox effect instead of an image, then simply add a link to an external page (it could be one of your own pages).  Find the code in the html where your link is and add rel=”lyteframe” instead of the others above.

Note: When using this effect it only works with highlighted text links (not textbox links) and image links.  It does not work very well with iWeb shapes for links.  For those, use the Highslide effect.

When applying the Lytebox effect it will take a default width and height of 400px and scrolling is set to auto.  If you want to control how big the frame is for your iFrame then add this code in your title tag

rev="width: 400px; height: 300px; scrolling: no;"

Replace the items in the brighter red to the size you want and your set.  Here is an example of the full link code as an example:

<a href="https://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

You could even group pages together like we did with the images above by using this “rel” tag instead: rel=”lyteframe[group1]

Another note on doing this if your using iFrames on your iWebpage: If you plan to use Lytebox in an iFrame environment, then you need to include lytebox.css in the parent document, while including lytebox.js in the iFrame document.  They are both found in the lytebox folder.

Browser Compatability:

This effect was built with browser compatability in mind, so it’s safe to say it works on most all browsers.  The following browsers have been tested with this script:

IE 5.01 SP2 – The fade effect does not work, but the background is darkened (completely).

IE 5.5 SP2 – No known issues.

IE 7.0 – No known issues.

Opera 9.23 – No known issues.

Firefox 1.5+ – No known issues, of course.

Safari 2.0+ – No known issues, of course.

End Notes:

Well that’s it folks.  Hopefully it’s not to crazy for you.  Like I’ve said in other posts.  I usually don’t like having to get into the HTML code after publish if possible, but sometimes to get a cool effect you just gotta.  So don’t work yourself up to much if you don’t get it the first time.  A simple republish in iWeb will let you start over and try again (though I recommend publishing from the File menu with the publish entire site option to get a clean full publish).

80 comments

  1. Clever 1 December, 2010 at 01:26 Reply

    Is there any way to NOT have the titles of the picture on the lytebox pop up picture? In other words, is it possible to have just the “1 of 2” page numbers but not the picture titles? It would look much cleaner and then I wouldn’t have to rename them all….

    Cheers

  2. Brian 5 December, 2010 at 12:28 Reply

    I put in all the codes correctly and everytime i click on the picture it doesnt do the light box effect on the site, but when i open the html file it works fine, can anyone help me

  3. JG 19 December, 2010 at 12:11 Reply

    LOVE this funcationality! BUT I can’t get the “next” or “back” buttons to work. Am I not coding the lytebox [group] script correctly? Help please!

  4. Clever 10 January, 2011 at 01:30 Reply

    Still kinda confused…

    Everything works great but the Lytebox comes up HUGE on my screen. Not 100% sure how to make the pictures medium sized like the in the example above in “view demo”?

    Any solutions?

  5. Clever 10 January, 2011 at 10:04 Reply

    Example, this is one picture. I want the picture in the iFrame to be smaller, not the full screen. Did I place the html code to make the picture resizable in the right place? I’ve tried putting the provided code everywhere in the title tag but no luck. Having a little trouble with this one…

    Thanks
    Clever

  6. Clever 10 January, 2011 at 10:37 Reply

    Ok that last post didn’t come through properly. (didn’t show my code)

    Anyway, for the life of me, I cannot figure out how to make my iFrame smaller than the whole screen!!

    I tried putting the rev=”width: 400px; height: 300px; scrolling: no; in the title tag but it doesn’t make any difference. Plus when I change the values of the 400 or 300 nothing happens.

    Does anyone know where exactly I put the above tag to make my iFrame smaller?

    The instructions above state:

    “Replace the items in the brighter red to the size you want and your set. ”

    but the problem is that nothing in that line is red???

    Help pls….

    Thank you

    C

  7. hedog 27 January, 2011 at 11:14 Reply

    What would be causing lytebox to not work once uploaded to my host? On my Mac everything works fine, but when I upload the entire site, the lytebox scripts aren’t working. Its as though I didn’t put the scripting in, but yet when I go to view the page source, everything’s where it should be, and when comparing the folder on my Mac to the folder via Cyberduck, they’re exact.

    The website I included is a test page for 1 image, that is not working.

    I’ve used lytebox before and never had any problems.

    Here’s a link to the folder containing the files for the test page I did.
    http://bombshellartstudio.com/Picture/Picture%202.png

    Any help would be greatly appreciated, especially since I have a finished site that contains 72 images using lytebox. Thanks you.

    • Kevin 25 February, 2011 at 18:05 Reply

      I’m having this same problem. Any help would be greatly appreciated.

      I tried opening the page in chrome and safari. It just runs like the script wasn’t entered in both. But when I save to local folder, it works as intended.

      • Bastian 28 June, 2011 at 14:39 Reply

        Try to take only the files within the lytebox-folder to your website folder, not the whole folder, as it is written above. I had the same problems as you did, but once I did this, everything worked out fine.

        • jason 11 July, 2012 at 10:06 Reply

          i have the exact same problem. when on the webserver, script is not working, copied the whole folder on my desktop -> works! i also did variious changes of the address of the js and css file (above the head section), e.g. renamed them put them outside the folder, ohne folder above and below. still: nothing worked! why is it functioning so well when viweing offline and no effect when online (safari or ff same problem).

  8. @JFoundation 27 January, 2011 at 20:59 Reply

    Sounds like you need to resize the pictures in a photo editor beforehand…? I think this code will only display your pictures at the size they are. Forgive me if I misread and you’re past that stage already.

  9. Dhouglas 15 February, 2011 at 10:29 Reply

    This sounds so complicated. May you do a Tutorial video, explaning how to do that step by step?

    Since now I already appreciate you time and patience.

    Cheers

  10. Kris 25 April, 2011 at 12:56 Reply

    My son sells custom lego® minifigures & he takes multiple pictures of them. I would like to have the main image on the page & then when someone clicks on it let them look through the other images of that same guy.I notice that highslide can have 1 thumbnail showing on a webpage, but when you click on it you can look at more photos that are grouped with that one thumbnail (you don’t have to show on your page all the photos that will be available for viewing once you click on the thumbnail). I think it has something to do with hidden containers, but I could be way off base with that. Highslide appears to be much more complicated than lytebox. Is there ANY way to do this same effect with lytebox?

    Thanks for any help you can provide.

  11. Jean-marc 4 June, 2011 at 02:39 Reply

    Hi Jason,
    First of all you have got a great website which help me so much. I have got a proble m with this step : Step 5) Open html page (the one with the images linked to itself we did in step 2) in an HTML editor because I don’t find any html page on my site. Can you hepl me ? Thank you and have a great day,Jean-marc

  12. Dan 27 June, 2011 at 19:45 Reply

    Ive got this working really well, thanks for the tutorial!
    I do have a problem however, I have a videoclip embedded on the same page using a HTML snippet and the Lytebox is popping up UNDER the videoclip. I can’t work out why or how to fix it. Weird thing is that it sin’t consistent across pages.
    Here is one with the Lytebox popping UNDER the videoclips:
    http://www.charena.com.au/katemedia.html
    But this one seems to work fine, with Lytebox popping OVER the videoclips:
    http://www.charena.com.au/lukemedia.html

  13. Goran 3 August, 2011 at 05:52 Reply

    Hi,

    I just learned how to do Lytebox in iWeb but I have a question. Could you tell me which line to edit not to have titles in the image gallery nor numbers of the photos?

    Thanx a lot,

    Goran

  14. Laura 16 August, 2011 at 10:08 Reply

    Please help me… :s
    I’m new with Iweb and HTML and I was beavering away on my new website. I published what was finished and used the code and everything to get the cool lytebox effect. It was working perfectly!! :)
    until…I worked on my other pages and published the whole thing again…it overwrote everything!!! :O
    My solution so far was to copy the HTML codes of the photo’s and put them back in afterwards, but since I’ll probably be up-dating my site ones every 2 weeks, this is not a permanent solution :(
    It takes forever with the amount of photo’s I’m planning to put on my site.
    Is there any trick to solve this??? :s …..
    Greetings Laura

  15. Kw 7 September, 2011 at 07:38 Reply

    Testing this locally but can’t get it to work.

    put lytebox files in site folder (not subfolder)
    added the code above head section in html file
    added line to image

    no lytebox but just linking to a new page ?

  16. Brendan 4 October, 2011 at 21:48 Reply

    Hey so I really don’t know what I’m doing. I followed the steps, but I can’t seem to get this to work right. when I am finished doing everything and double click my page hml file it takes me to the page on my web browser and the effect works perfect. But when I take that file and load it to my server with the rest of my website, and go through my website…. it doesn’t work at all. Any ideas what I might be doing wrong?

    Thanks for the help

  17. Mike McGuire 29 November, 2011 at 17:56 Reply

    Is there a way to add “Lytebox with Grouped Images”
    but only show one thumbnail? I don’t want to show the entire set of images.

    Mike

  18. Arnab 20 December, 2011 at 21:18 Reply

    Hi Jason,

    Is it possible to embed google motion charts in iweb? I know it is possible to embed in google sites using google “motion chart” gadget. In more general terms, is it possible to load ajax in iweb?

  19. peter hayes 9 March, 2012 at 09:18 Reply

    i have everything done right but the picture opens in a new window with the picture in the top left??? i am so frustrated right now…. can anyone help?

  20. Frank 21 March, 2012 at 12:28 Reply

    Hello,

    I followed this great tutorial and everything works fine offline – but when I upload the files to the server, the thumbnails just open a bigger version of the image within the same window.

    Any ideas on how to solve this problem?

    Thanks in advance!

  21. Hozey 1 July, 2012 at 11:18 Reply

    Thanks for this tutorial and your entire site. The site has been a huge help to this novice. Lytebox is working on the local folder and on my test site (http://test.garlandcountydemocrats.org/Stills_2.html), but I want to make the zoom box larger and don’t see where to do so; I’ve looked at lytebox.css and lytebox.js. Please tell me what to change in which file to increase the size of the zoom box.

    Off topic: Could you move the Facebook, Tweet, etc. box over the the right side or make it removable by the user? It’s really in the way and a hugh distraction.

    Thanks for your help and again, thanks for a tremendously helpful site.

Leave a reply

Facebook
Twitter
YouTube