Results 1 to 5 of 5

Thread: simple gallery with lightbox

  1. #1
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    78
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default simple gallery with lightbox

    1) Script Title: SimpleGallery

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

    3) Describe problem:
    I have a working copy of Simple Galley with multiple slides in a cropped "thumbnail" view.

    The simple gallery offer the option to an "external link" I was wondering if this can be intgrated with lightbox2.04a?

    Here what I am trying to achieve

    Code:
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 186], //width/height of gallery in pixels. Should reflect dimensions 
    	//of the images exactly
    	imagearray: [
    		//["path_to_image", "optional_link", "optional_linktarget", "optional_textdescription"]
    		["examples/thumbs/Bath01.jpg", 'href="examples/Bath01.jpg" rel="lightbox"', ,],
    		["examples/thumbs/Bath02.jpg", , ,],
    		["examples/thumbs/Bath03.jpg", , ,],
    		["examples/thumbs/Bath04.jpg", , ,], . . .
    With the leftright slideshow it works fine but one of the differences is the array in the latter is numeric delimited
    Code:
    //Specify the slider's images
    var leftrightslide=new Array()
    var finalslide=''
    
    leftrightslide[1]='<a href="Solids/BirkdaleNaturalCherry.jpg" rel="lightbox[natural]" title="Birkdale Natural Cherry"><img src="Solids/thumbs/BirkdaleNaturalCherry.jpg"border=0></a>'
    it basically boils down to being able to click on a "slideshow thumbnail" and associate it with rel="lightbox[]"

    The way it is now it returns an error. I am guessing I will have to declare the array differently.

    Nothing published yet. as there is a huge amount of pics that must go with it.

  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

    The one array being numeric and the other not makes no difference. All true javascript arrays are numeric. But, depending upon how they are defined in the code, these numbers need not necessarily be written out.

    The real difference is that in the Simple Gallery array you are required to pass an image and optionally an href and target values. In the other array you are passing an entire string of HTML as the code that will be written to the page. This gives you more control over things, as you may include any attributes, style, etc. you like in the tags you are placing in there.

    Perhaps the simplest way to get your rel="lightbox" in there would be to edit the simplegallery.js file here:

    Code:
    	getSlideHTML:function(imgelement){
    		var layerHTML=(imgelement[1])? '<a href="'+imgelement[1]+'" rel="'+imgelement[2]+'">\n' : '' //hyperlink slide?
    		layerHTML+='<img src="'+imgelement[0]+'" style="border-width:0" />'
    		layerHTML+=(imgelement[1])? '</a>' : ''
    		return layerHTML //return HTML for this layer
    	},
    This will change the target specification in the Simple Gallery's array into a rel specification. So you then could have:

    Code:
    var mygallery=new simpleGallery({
    	wrapperid: "simplegallery1", //ID of main gallery container,
    	dimensions: [250, 186], //width/height of gallery in pixels. Should reflect dimensions 
    	//of the images exactly
    	imagearray: [
    		//["path_to_image", "optional_link", "optional_linktarget", "optional_textdescription"]
    		["examples/thumbs/Bath01.jpg", "examples/Bath01.jpg", "lightbox"],
    		["examples/thumbs/Bath02.jpg", , ,],
    		["examples/thumbs/Bath03.jpg", , ,],
    		["examples/thumbs/Bath04.jpg", , ,], . . .
    - John
    ________________________

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

  3. #3
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    78
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    OK that did not work with a C&P, so I just edited the target to rel. and also switched to the no conflicts version. (simplegallery_nc.js)

    It works fine, but we do not seem to have the option of grouping like rel="lightbox[group1]"(which is not critical)

    Sorry I am not very literate with JS, I do recognize commands/tags but this is not a language I am used to working with, it seems close to the vb I do know (partially)

    I see you also dropped a comma in your suggestion of:

    Code:
    //["path_to_image", "optional_link", "optional_linktarget", "optional_textdescription"]
    
    ["examples/thumbs/Bath01.jpg", "examples/Bath01.jpg", "lightbox" , ],
    Not that it matters to me, but others reading may want to incorporate the text too?

    As it stands, I am satisfied as the pics I am displaying is for ideas only; so it is not work I have specifically done, the prev/next is not necessary in this case but I may change my mind

    BTW, how do you do the yellow "highlight" with your code suggestions? Obviously BBCode I am unfamiliar with.

  4. #4
    Join Date
    Dec 2006
    Location
    South Africa
    Posts
    78
    Thanks
    12
    Thanked 0 Times in 0 Posts

    Default

    Seems we have another bug

    The simple gallery is over the lightbox in spite of using the no conflicts version of the simplegallery_nc.js script. Seems like it is only with Firefox, IE it is fine.

    Can't use the important! tag you showed me last time as we have no CSS.

    Using:

    <script type="text/javascript" src="../Renovate/scripts/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="../Renovate/scripts/simplegallery_nc.js">

    in this page

    I will complete the links and publish with pics so you can check it out tomorrow or Monday, no rush.

  5. #5
    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

    Not really a bug. Open up the lightbox.css file. In it you will find 3 refernces to z-index. Adjust them as shown:

    Code:
    #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 100000; text-align: center; line-height: 0;}
    Code:
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }
    Code:
    #overlay{ position: absolute; top: 0; left: 0; z-index: 90000; min-width: 100%; height: 500px; background-color: #000; }
    - John
    ________________________

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

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
  •