lightbox with simplegallery conflict

**Lorenabisio** · 09-04-2013, 05:23 PM

1) Script Title: Simple Controls Gallery and Lightbox image viewer 2.03a

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

3) Describe problem:

Hi!

I am working on a seminary´s web design and I am having a problem using both in the same page lightbox and simplegallery. When I call lightbox in <head> including the lines that follow next, simplegallery does not load the images, it stays in the "loading" stage:
<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

You can watch the error at:
http://www.estudiovzb.com/sitb/indexError.html

If I delete the lightbox lines, the pics load normally:
http://www.estudiovzb.com/sitb/index.html

I need lightbox to make zoom on the footer map. The lightbox works properly but for some reason I ignore, when I call lightbox together with simplegallery, the images called by simplegallery won´t load.

Somebody would help me please

?

Thank you!
Lorena

**jscheuer1** · 09-04-2013, 07:56 PM

Use this version of simple gallery (right click and 'Save As'):

simplegallery.js

Add this code (highlighted as shown):

Code:

<script type="text/javascript" src="http://localhost/demos/simplegallery/simplegallery.js">

/***********************************************
* Simple Controls Gallery- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript">
var mygallery=new simpleGallery({
	wrapperid: "simplegallery1", //ID of main gallery container,
	dimensions: [573, 382], //wid . . .

Change this:

Code:

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="lightbox/js/prototype.js"></script>
<script type="text/javascript" src="lightbox/js/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

to this:

Code:

<link rel="stylesheet" href="lightbox/css/lightbox.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js?load=effects"></script>
<script type="text/javascript" src="lightbox/js/lightbox.js"></script>

The browser cache may need to be cleared and/or the page refreshed to see changes.

There might still be a problem with IE 8 and less. I can't easily test that right now. Once you get it up and working, if there is a problem in IE 8, we can deal with it.

**Lorenabisio** · 09-04-2013, 08:34 PM

Hey John!

Thank you so much for your soon answer!
You know, this is the first time I post in Dynamic Drive´s forum, and after I did I read the topic that conflicts between two scripts won´t be answered, so I kept googling and I found a similar post also answered by you (http://www.dynamicdrive.com/forums/s...-2-03a-scripts). I started testing and was almost done when I received your answer, so I made kind of a mix between the two and the scripts are working together! Also in IE8 !

I have one last question: at first, Lightbox layed under Simplegallery, I changed z-index and it is almost done. The thing is that the pics on simplegallery don´t get the opacity given to the rest of the background. Have you got any trick to get the pics faded the same as the background?

Same link: http://www.estudiovzb.com/sitb/indexError.html

**jscheuer1** · 09-05-2013, 12:06 AM

Using a text only editor like NotePad, in the estudiovzb.com/sitb/lightbox2.04a/css/lightbox.css file (around line #27) boost the z-index for the overlay as shown (red):

Code:

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

The browser cache may need to be cleared and/or the page refreshed to see changes.

And yes, you were right to use Lightbox 2.04a to overcome the problem in IE 8. The only other alternative would be to use a different Lightbox script, like one written for jQuery, in which case it would have to be modified in order to allow for linked captions. I have such a modification for SlimBox. See:

http://www.dynamicdrive.com/forums/e...d-SlimBox-Good

for details.

But, as long as things are working for you now, there's no pressing need to change. However, by using a jQuery Lightbox, you can use just one copy of jQuery for the page and need no prototype.js or scriptaculous.js scripts.