Results 1 to 3 of 3

Thread: Javascript conflict between lightbox 2.04 and Simple Controls Gallery

  1. #1
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default Javascript conflict between lightbox 2.04 and Simple Controls Gallery

    Hello all. I am new to javascripting and to this forum but I have a question and I am asking for your help

    I have two script and there is how they are placed in the head
    HTML Code:
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/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" src="js/gallery.js"></script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    In this case the Simple Gallery don't work
    If i put the lightbox lines before the Gallery code the lightbox stop working, oppening the pics in a blank page.

    You can see the page here:http://minerva-stil.com/vsekidnevni.php

    I've searched a lot and i thing the both script don't have onload event so please tell me what could be the problem.

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,997
    Thanks
    43
    Thanked 3,198 Times in 3,160 Posts
    Blog Entries
    12

    Default

    Use this noConflict version of simplegallery.js (right click and 'save as'):

    Attachment 3642

    Order the scripts in the head of the page like so:

    Code:
    <link href="css.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="js/jquery-1.2.6.pack.js"></script>
    <script type="text/javascript" src="js/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" src="js/gallery.js"></script>
    <script type="text/javascript">
    jQuery.noConflict();</script>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    </head>
    Note: You will also want to up the z-index values in lightbox.css:

    Code:
    #lightbox{	position: absolute;	left: 0; width: 100%; z-index: 10000; text-align: center; line-height: 0;}
    #lightbox img{ width: auto; height: auto;}
    #lightbox a img{ border: none; }
    
    #outerImageContainer{ position: relative; background-color: #fff; width: 250px; height: 250px; margin: 0 auto; }
    #imageContainer{ padding: 10px; }
    
    #loading{ position: absolute; top: 40%; left: 0%; height: 25%; width: 100%; text-align: center; line-height: 0; }
    #hoverNav{ position: absolute; top: 0; left: 0; height: 100%; width: 100%; z-index: 1000; }
    #imageContainer>#hoverNav{ left: 0;}
    #hoverNav a{ outline: none;}
    
    #prevLink, #nextLink{ width: 49%; height: 100%; background-image: url(data:image/gif;base64,AAAA); /* 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; }
    
    #imageDataContainer{ font: 10px Verdana, Helvetica, sans-serif; background-color: #fff; margin: 0 auto; line-height: 1.4em; overflow: auto; width: 100%	; }
    
    #imageData{	padding:0 10px; color: #666; }
    #imageData #imageDetails{ width: 70%; float: left; text-align: left; }	
    #imageData #caption{ font-weight: bold;	}
    #imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em;	}			
    #imageData #bottomNavClose{ width: 66px; float: right;  padding-bottom: 0.7em; outline: none;}	 	
    
    #overlay{ position: absolute; top: 0; left: 0; z-index: 9000; width: 100%; height: 500px; background-color: #000; }
    Last edited by jscheuer1; 11-17-2010 at 06:49 PM. Reason: update script, add note
    - John
    ________________________

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

  3. The Following User Says Thank You to jscheuer1 For This Useful Post:

    xxTTcc (11-18-2010)

  4. #3
    Join Date
    Nov 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Default

    Many thanks for your response. Everything is fine now

Tags for this Thread

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
  •