Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2

Thread: Lightbox help

  1. #1
    New to the CF scene
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Lightbox help

    Hello everyone! I am so very new to Javascript and am trying to implement lightbox in my site. I have went through my code many times trying to figure out what I have done wrong. I have attached all of the javascript and image files.
    Please- If I am not giving enough info here, let me know. I am new to Javascript and this forum

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="lightbox.js"></script>
    
    
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>PixelRiot Design</title>
    <link href= "prd.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    function MM_swapImgRestore() { //v3.0
      var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    function MM_preloadImages() { //v3.0
      var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
        var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
        if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    
    function MM_findObj(n, d) { //v4.01
      var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
        d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
      if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
      for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
      if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    
    function MM_swapImage() { //v3.0
      var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
       if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>
    </head>
    
    <body onload="MM_preloadImages ('aboutbtnrollover.jpg','homebuttonrollover.jpg','portfoliobtnrollover.jpg','contactbtnrollover.jpg'); initLightbox()">
    
    <div id="background"><img src="bg_gray_stripe.jpg"/></div>
    
    	<div id="logo">
    	<img src="logo.jpg" alt="PRD logo" width="550" /></div>
        
        <div id="copyright">
    	Copyright Jen Raymond PixelRiot Design 2010
    	</div>
    
    	<div id="dropaline">
    	<img src="dropaline.jpg" alt="Click Me :)" width="197" height=					"153" />
    	</div>
    
    <div class="navigation">
    
    <div id="home"><a href="Home.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image24','','homebuttonrollover.jpg',1)"><img src="homebutton.jpg" name="Image24" width="150" height="51" border="0" id="Image24" /></a></div>
    
      <div id="portfolio"><a href="portfolio.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image25','','portfoliobtnrollover.jpg',1)"><img src="portfoliobtn.jpg" name="Image25" width="150" height="51" border="0" id="Image25" /></a></div>
        
        <div id="about"><a href="AboutMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image23','','aboutbtnrollover.jpg',1)"><img src="aboutbtn.jpg" name="Image23" width="150" height="51" border="0" id="Image23" /></a></div>
        
        <div id="contact"><a href="ContactMe.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image26','','contactbtnrollover.jpg',1)"><img src="contactbtn.jpg" name="Image26" width="150" height="51" border="0" id="Image26" /></a></div>
    
    
    
    </div>
    <div id="movie">
      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" 					width="500" height="200" id="FlashID" title="Love Your Website">
        <param name="movie" value="PRDAnimation.swf" />
        <param name="quality" value="high" />
        <param name="wmode" value="opaque" />
        <param name="swfversion" value="6.0.65.0" />
        <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
        <param name="expressinstall" value="Scripts/expressInstall.swf" />
        <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
        <!--[if !IE]>-->
        <object type="application/x-shockwave-flash" data=			"PRDAnimation.swf" width="500" height="200">
          <!--<![endif]-->
          <param name="quality" value="high" />
          <param name="wmode" value="opaque" />
          <param name="swfversion" value="6.0.65.0" />
          <param name="expressinstall" value="Scripts/expressInstall.swf" />
          <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
          <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
          <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
          <!--[if !IE]>-->
        </object>
        <!--<![endif]-->
      </object>
      <script type="text/javascript">
    <!--
    swfobject.registerObject("FlashID");
    //-->
    </script>
    
    </div>
    <div id="portfoliosnippet"><img src="portfoliosnippet.jpg" alt="Portfolio" width="273" height="41" />
    </div>
    
    <div id="cupcakethumb">
    <a href="CupcakeAffairThumb.jpg" rel="lightbox"><img width="96" height="96" src="CupcakeAffairThumb.jpg"/></a>
    </div>
    
    <div id="portfoliothumb">
    <img src="portfoliothumb.jpg" width="96" height="96" alt="Student Portfolio" />
    </div>
    
    <div id="ilythumb"><img src="ilythumb.jpg" width="96" height="96" alt="Ily Logo" /></div>
    
    <div id="ceramichethumb">
    <img src="ceramichethumb.jpg" width="96" height="96" alt="Ceramiche Site" />
    </div>
    
    
    </body>
    </html>

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    247
    Thanks
    4
    Thanked 22 Times in 22 Posts
    pixel:

    I suggest you try the following free application which dynamically creates a scrollable image gallery with the gray overlay effect.

    http://www.javascript-demos.com/down...ic_Gallery.zip

    Read the "Read This" text file.

    A demo is included in the .zip file, with sample images.

    No framework is used.

    Edit the ....config.js file for your images. This is the example ...config.fs file:

    Code:
    	var imgPath = "./dynamic_gallery/images/";
    
    	var dynamicImage = [];            //  file name,  width, height;
    	dynamicImage[dynamicImage.length] = "models4.jpg | 152 | 216";	
    	dynamicImage[dynamicImage.length] = "scenic4.jpg | 200 | 120";	
    	dynamicImage[dynamicImage.length] = "free_stamp.jpg | 256 | 192";	
    	dynamicImage[dynamicImage.length] = "rock_hall.jpg | 240 | 180";
    	dynamicImage[dynamicImage.length] = "wide4.jpg | 284 | 116";
    	dynamicImage[dynamicImage.length] = "scenic1.jpg | 200 | 120";
    	dynamicImage[dynamicImage.length] = "wide3.jpg | 284 | 116";	
    	dynamicImage[dynamicImage.length] = "models2.jpg | 152 | 230";
    Then edit the ...css file for the width and height of the gallery.


  •  

    Posting Permissions

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