Create Pop-Up Content Using Highslide JavaScript

May 26, 2008

Many of you are asking how I create the neat linked pop-up content around my site. This is one of the cool options that the Highslide JavaScript Thumbnail Viewer provides.

This is not something you can add to an iWeb or RapidWeaver page very easily. It’s far easier to do in RapidWeaver and very straight-forward for WordPress, but not iWeb. I don’t want to duplicate the instructions that the source site provides, but I wanted to let you know, Highslide is the script I’m using to create those pop-ups. It’s also the script that allows you to make images expand and contract. I use that for screenshots.


About This Article

This entry was posted by Suzanne on Monday, May 26th, 2008 at 12:34 PM and was filed in the Solutions category using the tags: , , . You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

Create Rounded-Corner Rollover Buttons
Question: Would You Purchase Image Sets?


8 Responses to “Create Pop-Up Content Using Highslide JavaScript”

  1. Brian Burrow wrote:

    Yes, I love these things

  2. Arnaud de Theux wrote:

    I use Light Window on my iWeb site. Also Fancy Zoom from the creators of Coda. I add these to a few pages that I don’t update regularly so it’s not too painful and it works quite well. The only thing is that my iDisk is reaaally slow (at least in Europe, .Mac support seems to be aware of it as they told me) so sometimes the script don’t have enough time to load…

  3. Suzanne wrote:

    Arnaud – Hey I’m glad to see you dropping in to chat here. Can you post a link to your site in a comment for us? For some reason the links on names are not always working. Yours just reloads this page – another bug I have to hunt down and squash.

    I’d like to see how you’re using these other solutions. I love stuff like that. You can use it in creative ways to really improve the usability of your site.

  4. Arnaud de Theux wrote:

    Hi Suzanne,
    => http://www.arnoz.be
    FancyZoom works great and is really easy to set up: two JS to include and a onLoad argument to add to the body tag.
    Lightwindow is almost as easy, I added it yesterday. But it’s really strange, since we have been talking about it it doesn’t work anymore :-( ! I’m trying right now to see what’s happening but the links just won’t load. Or maybe it’s my buggy iDisk again…

    Anyway, you can see FancyZoom in action on the main page and in Portfolio for example (click any images) and you should see the other one working in Contact when clicking “drop me a line” or “CV: Voir” below it.
    Plugins websites: http://stickmanlabs.com/lightwindow/ and http://www.cabel.name/2008/02/fancyzoom-10.html

  5. Suzanne wrote:

    Dang! I’m loving that LightWindow 2.0 solution :-O Thanks a ton for posting your link and the information about these. I think they’re both great options to load any kind of content. The way LightWindow loads other web sites is just awesome and that’s going to work really well for a few of my situations.

    Thanks again!

  6. Arnaud de Theux wrote:

    Yep, it looks great :-) But at the moment it’s still not working as it should, however if I create a test page and upload it to my iDisk it does work. I’ll look into it.
    I like Accordion too: http://www.stickmanlabs.com/accordion which looks quite the same as what you use on the Contact section, for example.

  7. M J wrote:

    I am not getting how to use this in iweb. could someone please help me!
    thanks,

  8. Suzanne wrote:

    I think it would be a very tedious process to add it to iWeb – one I personally would not attempt :-/ iWeb just is not ready to handle outside scripts like that. I think you could do it by inserting the script elements into your published HTML, but every time you publish, there’s a risk that iWeb will overwrite those edits.

    RapidWeaver or WordPress are better solutions if you want to do some fancy stuff like this.