simple gallery with lightbox

[Bernie Kruger]

1) Script Title: SimpleGallery

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/simplegallery.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


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

//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.

[jscheuer1]

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:


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:


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", , ,], . . .

[Bernie Kruger]

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:


//["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 :p

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

[Bernie Kruger]

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.

[jscheuer1]

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


#lightbox{ position: absolute; left: 0; width: 100%; z-index: 100000; text-align: center; line-height: 0;}


#hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 10000; }


#overlay{ position: absolute; top: 0; left: 0; z-index: 90000; min-width: 100%; height: 500px; background-color: #000; }