Results 1 to 5 of 5

Thread: enlarge a photo thumbnail and grey out the page behind

  1. #1
    Junior Member
    Join Date
    Nov 2010
    Posts
    8

    Default enlarge a photo thumbnail and grey out the page behind

    I'd like to have a page of photo thumbnails (i can do this bit) and when you click on a thumbnail the photo expands out to fill say 2/3 of the screen while the page behind is greyed out by having a partially opaque "filter" put across it. Here's a web site that has this type of effect http://www.spoolphotography.com/portfolio/new-images/

    is it possible to do this in Essentials some how I can't see anything in the manual that looks like it does it.

    thanks andrew

  2. #2
    Senior Member chuckj's Avatar
    Join Date
    Jan 2010
    Location
    www.beyondfusion.com - Florida
    Posts
    1,302

    Default

    This capability is not built into Essentials.

    It's not difficult to add though.

    There are free and commercial ways of doing so.

    For example:

    Free: http://fancybox.net/

    Commercial: http://www.likno.com/jquery-modal-wi...a_aid=bb20a47e

    The program used on the site you mentioned: http://www.shadowbox-js.com/
    Last edited by chuckj; 11-11-2010 at 02:28 PM.
    Chuck Joslin
    www.BeyondFusion.com
    PHP & MySQL development with Fusion
    Fusion support for AllWebMenus (Likno) Contact me for custom AWM menus for your sites.
    Tutorials and Forums

  3. #3
    Junior Member
    Join Date
    Nov 2010
    Posts
    8

    Default

    thanks chuckj, i'll give it a go

  4. #4
    Junior Member
    Join Date
    Nov 2010
    Posts
    8

    Default

    Hi chuckj

    I have not been able to get shadowbox to work, under usage on the shadowbox website in "setup" it says to include the following in <head> so i have pasted the code below into the white area under the grey <head> area in the HTML view screen of net objects.

    <link rel="stylesheet" type="text/css" href="shadowbox.css">
    <script type="text/javascript" src="shadowbox.js"></script>
    <script type="text/javascript">
    Shadowbox.init();
    </script>

    But then it says to include/call shadowbox like this

    <a href="myimage.jpg" rel="shadowbox">My Image</a>

    but thre is no <a href for the jpg images in the net objects HTML view there is a <IMG ID instead so would I just put it in the <IMG ID section instead ?

    Also in the section "installation" under "usage" on the shadowbox website it says "decompress the archive (unzip it) and upload the entire folder to your web server" but I am just running net objects on my C drive at the moment so what would be the equivalent thing to do so that it can find shadowbox and run it when i go to preview site in net objects, net objects must need to know where the shadowbox files are on the C drive i guess.

    any help would be great thanks andrew

  5. #5
    Senior Member Adendum's Avatar
    Join Date
    Apr 2010
    Location
    London (UK) & Granada (Spain)
    Posts
    926

    Default

    Andrew,

    Take a look at Visuallightbox (http://visuallightbox.com/). Very easy to implement and if you search this forum on visuallightbox you'll find several threads that will assist.
    Paul - Aditerum Ltd and AllSortsOfStuff Ltd
    NOF11 (in Admin mode!); Vista Premium 64bit; AMD Phenom IIx4 945 Processor 3.00Ghz; 8.0Gb RAM
    Wouldn't it be great if there was only a single browser to worry about!!!

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •