Results 1 to 3 of 3

Thread: Need help to make multi image in Lightox 2.

  1. #1
    Join Date
    Apr 2007
    Posts
    50
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default Need help to make multi image in Lightox 2.

    1) Script Title: Lightbox 2

    2) Script URL (on DD):http://www.dynamicdrive.com/dynamici...box2/index.htm

    3) Describe problem: I can make the images work fine now..individually. But when I create the set, I don't get the right/left arrows on the enlarged images.
    marxtestsite.com



    Thank you.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Actually, what you have on the page is fine. The previous and next work as well as the 'Image 1 of 2' bit. It's the lightbox.css file that's a problem. It's preventing you from seeing the previous/next images* (but if you were to click on the correct spot in the enlarged images it will load the previous or next enlarged image):

    Code:
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(file:///C|/Documents%20and%20Settings/Mark/My%20Documents/Website%20accounts/images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(file:///C|/Documents%20and%20Settings/Mark/My%20Documents/Website%20accounts/images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(file:///C|/Documents%20and%20Settings/Mark/My%20Documents/Website%20accounts/images/nextlabel.gif) right 15% no-repeat; }
    These should be:

    Code:
    #prevLink, #nextLink{
    	width: 49%;
    	height: 100%;
    	background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
    	display: block;
    	}
    #prevLink { left: 0; float: left;}
    #nextLink { right: 0; float: right;}
    #prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
    #nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

    * If those images are in those locations on the local computer, they might show up anyway.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Apr 2007
    Posts
    50
    Thanks
    6
    Thanked 0 Times in 0 Posts

    Default

    got it!
    Thanks!!!!

Bookmarks

Posting Permissions

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