www.webdeveloper.com
Results 1 to 3 of 3

Thread: HELP PLEASE! rollOvers and lightboxes

  1. #1
    Join Date
    Nov 2008
    Posts
    2

    HELP PLEASE! rollOvers and lightboxes

    im trying to build a site like this http://www.blackbookstencils.com/gallery.php i have the rollovers working made them with dreamweaver behaviors but i cant figure out how to get the lightbox to work im using lightboxV2.04 and im really confused heres some of my code....



    <head>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <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>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body,td,th {
    color: #CCCCCC;
    }
    body {
    background-color: #000000;
    }
    .style1 {font-family: Arial, Helvetica, sans-serif}
    a:link {
    color: #666666;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    -->
    </style>
    <script type="text/JavaScript">
    <!--
    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_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_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>



    <body onload="MM_preloadImages('../images/previews/electionissuepreview.png','../images/previews/aidenangel.png','../images/previews/aidenpagepreview.png','../images/previews/artinnypreview.png','../images/previews/baysidepage.png','../images/previews/emmurezombiepreview.png','../images/previews/HawthorneHeightsadPreview.png','../images/previews/sistersinadpreview.png','../images/previews/sleepereffectpagepreview.png','../images/previews/sofachicagopreview.png')">
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p class="style1">DESIGN*</p>
    <table width="427" height="158" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="37" height="96">&nbsp;</td>
    <td width="37"><img src="../images/spacer.png" width="347" height="346" id="Image1" /></td>
    <td width="37">&nbsp;</td>
    <td width="37">&nbsp;</td>
    <td width="37">&nbsp;</td>
    <td width="37"><a href="javascript:;"><img src="../images/thums/baysidepage_t.png" width="94" height="94" border="0" onclick="rel=&quot;lightbox[bsp]&quot;&gt;&lt;img src=&quot;../images/fullsize/baysidepage.jpg[/B][/B][/B]&quot; width=&quot;400&quot; height=&quot;600&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;" onmouseover="MM_swapImage('Image1','','../images/previews/baysidepage.png',1)" onmouseout="MM_swapImgRestore()"/></a></a>
    <img src="../images/thums/emmurezombie_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/emmurezombiepreview.png',1)" onmouseout="MM_swapImgRestore()"/></a></td>
    <td width="37"><img src="../images/thums/artinny_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/artinnypreview.png',1)" onmouseout="MM_swapImgRestore()" /><a href="javascript:;"><img src="../images/thums/Hawthorneheightsusatoday_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/HawthorneHeightsadPreview.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="37"><img src="../images/thums/sistersinAd_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sistersinadpreview.png',1)" onmouseout="MM_swapImgRestore()" /><a href="javascript:;"><img src="../images/thums/aidenpage_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/aidenpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    <td width="37"><a href="javascript:;"><img src="../images/thums/sleepereffectpage_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sleepereffectpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /></a><img src="../images/thums/aidenshirt_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/aidenangel.png',1);MM_swapImage('Image1','','../images/previews/sleepereffectpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /></td>
    <td width="94"><a href="javascript:;"><img src="../images/thums/electionissue_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/electionissuepreview.png',1)" onmouseout="MM_swapImgRestore()" /><img src="../images/thums/sofachicago_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sofachicagopreview.png',1)" onmouseout="MM_swapImgRestore()" /></a></td>
    </tr>


    <img src="../images/thums/baysidepage_t.png" width="94" height="94" border="0" onclick="rel=&quot;lightbox[bsp] this was my last attempt ive tried just about everthing i could think of

  2. #2
    Join Date
    Nov 2008
    Posts
    2

    thum w/rollOver cant get lightbox to work

    i made thumbs that have a preview (bigger version in left corner) on rollover... i cant get the lightbox (using lightbox2) to work what am i doing wrong ive tried everything....

    <head>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <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>

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    body,td,th {
    color: #CCCCCC;
    }
    body {
    background-color: #000000;
    }
    .style1 {font-family: Arial, Helvetica, sans-serif}
    a:link {
    color: #666666;
    text-decoration: none;
    }
    a:visited {
    text-decoration: none;
    }
    a:hover {
    text-decoration: none;
    }
    a:active {
    text-decoration: none;
    }
    -->
    </style>
    <script type="text/JavaScript">
    <!--
    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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_pj++.src=a;}}
    }

    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
    }

    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.frameshttp://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[n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_srj++=x; if(!x.oSrc) x.oSrc=x.src; x.src=ai+2;}
    }
    //-->
    </script>

    <body onload="MM_preloadImages('../images/previews/electionissuepreview.png','../images/previews/aidenangel.png','../images/previews/aidenpagepreview.png','../images/previews/artinnypreview.png','../images/previews/baysidepage.png','../images/previews/emmurezombiepreview.png','../images/previews/HawthorneHeightsadPreview.png','../images/previews/sistersinadpreview.png','../images/previews/sleepereffectpagepreview.png','../images/previews/sofachicagopreview.png')">




    DESIGN*

    <table width="427" height="158" border="0" cellpadding="0" cellspacing="0">
    <tr>
    <td width="37" height="96"> </td>
    <td width="37"><img src="../images/spacer.png" width="347" height="346" id="Image1" /></td>
    <td width="37"> </td>
    <td width="37"> </td>
    <td width="37"> </td>
    <td width="37"><img src="../images/thums/baysidepage_t.png" width="94" height="94" border="0" onclick="rel=&quot;lightboxbsp&quot;&gt;&lt;img src=&quot;../images/fullsize/baysidepage.jpg&quot; width=&quot;400&quot; height=&quot;600&quot; border=&quot;0&quot; alt=&quot;&quot; /&gt;" onmouseover="MM_swapImage('Image1','','../images/previews/baysidepage.png',1)" onmouseout="MM_swapImgRestore()"/>
    <img src="../images/thums/emmurezombie_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/emmurezombiepreview.png',1)" onmouseout="MM_swapImgRestore()"/></td>
    <td width="37"><img src="../images/thums/artinny_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/artinnypreview.png',1)" onmouseout="MM_swapImgRestore()" /><img src="../images/thums/Hawthorneheightsusatoday_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/HawthorneHeightsadPreview.png',1)" onmouseout="MM_swapImgRestore()" /></td>
    <td width="37"><img src="../images/thums/sistersinAd_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sistersinadpreview.png',1)" onmouseout="MM_swapImgRestore()" /><img src="../images/thums/aidenpage_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/aidenpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /></td>
    <td width="37"><img src="../images/thums/sleepereffectpage_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sleepereffectpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /><img src="../images/thums/aidenshirt_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/aidenangel.png',1);MM_swapImage('Image1','','../images/previews/sleepereffectpagepreview.png',1)" onmouseout="MM_swapImgRestore()" /></td>
    <td width="94"><img src="../images/thums/electionissue_t.png" width="94" height="94" border="0" onmouseover="MM_swapImage('Image1','','../images/previews/electionissuepreview.png',1)" onmouseout="MM_swapImgRestore()" /><img src="../images/thums/sofachicago_t.png" width="94" height="94" onmouseover="MM_swapImage('Image1','','../images/previews/sofachicagopreview.png',1)" onmouseout="MM_swapImgRestore()" /></td>
    this was sort of a last ditch effort

    <img src="../images/thums/baysidepage_t.png" width="94" height="94" border="0" onclick="rel="lightboxbsp"><img src="../images/fullsize/baysidepage.jpg"

  3. #3
    Join Date
    Jan 2010
    Posts
    1

    Help.

    Did u ever figure out how to fix this problem. Im working on a site and have the same problem.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles