Sliding Billboard Support Product Page
Link not opening in Lightbox from sliding billboard
Asked 23 Feb 2010 16:54:46
1
has this question
23 Feb 2010 16:54:46 Gabrielle H posted:
Hi,I decided to try and recreate the billboard in the context of my new layout. I've inserted one section and used the behaviours so that when the image is clicked it opens up in Lightbox. When I test however, I get the link cursor when I hover over the image in the billboard but it doesn't open up a larger version in lightbox.
I've included the current code below and wondered if someone could tell me why this isn't working?
Thanks
<!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"><!-- InstanceBegin template="/Templates/Catalogue_Business.dwt.php" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled</title>
<!-- InstanceEndEditable -->
<link href="../../css/screen.css" rel="stylesheet" type="text/css" />
<script type="text/javaScript" src="../../js/curvycorners.src.js"></script>
<style type="text/css">
div.round {
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
/* -webkit-box-shadow: 2px 2px 4px #666;
-moz-box-shadow: 2px 2px 4px #666;
CCborderRadius: 10px;*/
}
h3.round2, div#content {
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
}
/*div#content, div#nav_main {
-webkit-box-shadow: 2px 2px 4px #666;
-moz-box-shadow: 2px 2px 4px #666;
}
*/
</style>
<script type="text/javascript" src="../../p7tm/p7tmscripts.js"></script>
<link rel="stylesheet" href="../../p7tm/p7tmbasicbut.css" type="text/css" />
<link href="../../css/screen_corp.css" rel="stylesheet" type="text/css" />
<link href="../../SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<script language="javascript" type="text/javascript" src="../../dmx/dmx.core.js"></script>
<script language="javascript" type="text/javascript" src="../../dmx/widgets/Lightbox/dmx.lightbox.js"></script>
<!--[if IE]><script language="javascript" type="text/javascript" src="../../dmx/lib/excanvas-compressed.js"></script><![endif]-->
<link rel="stylesheet" type="text/css" href="../../Styles/dmxSlidingBillboard.css" />
<link rel="stylesheet" type="text/css" href="../../Styles/dmxSlidingBillboard/dark_blue/dark_blue.css" />
<link rel="stylesheet" type="text/css" href="../../dmx/widgets/Lightbox/styles/default/style.css" />
<script language="javascript" type="text/javascript" src="../../ScriptLibrary/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="../../ScriptLibrary/jquery.easing.1.3.js"></script>
<script language="javascript" type="text/javascript" src="../../ScriptLibrary/jquery.mousewheel.pack.js"></script>
<script language="javascript" type="text/javascript" src="../../ScriptLibrary/dmxSlidingBillboard.js"></script>
<script type="text/javascript">
<!--
function openDMXzoneLightbox(arg, options, context) {//v1.2
context = context || window, options = options || {};
if (context.DMX && context.DMX.Lightbox) {
context.DMX.Lightbox.open(options.plugin || "", arg, options);
document.MM_returnValue = false;
}
}
//-->
</script>
<!-- InstanceEndEditable -->
</head>
<body onload="P7_TMopen()">
<div id="fullWidthHeader">
<div id="tile_trans">
<div id="inner"> </div>
</div>
</div>
<div id="outerWrapper">
<div id="branding">
[h1]<a href="../index.php">Site</a>[/h1]
<div id="nav_main" class="round">
[h2]Main navigation[/h2]
<ul id="nav_bar">
<li id="home"><a href="#">Home</a>[/*]
<li id="company"><a href="#">About</a>[/*]
<li id="mtm"><a href="#">Made to Measure</a>[/*]
<li id="support"><a href="#">Tax Savings</a>
[/*]
<li id="support"><a href="#">Custom design</a>
[/*]
<li id="contact"><a href="#">Contact</a>[/*]
<li id="map" class="last"><a href="#">Map</a>[/*][/list]
</div>
</div>
<div id="content">
<div id="content_main"><!-- InstanceBeginEditable name="EditRegion3" -->
<div id="catalogue">
<div class="dmxBillboard dark_blue" id="Corporate" style="width:656px;height:396px;">
<div class="dmxBillboardHeader">
[h3]Corporate[/h3]
<div class="dmxBillboardSectionNav">
<a href="#sec_1">Suits</a>
<div style="clear:both"></div>
</div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardView layout-left">
<ul id="sec_1" title="Suits">
<li onclick="openDMXzoneLightbox('../../images/catalogue/corp/corporate/suits/1.jpg', {title:'title', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
<a href="javascript:void(0);" onclick="openDMXzoneLightbox('../../images/catalogue/corp/corporate/suits/1.jpg', {title:'title', width:650, height:776, preset:'minimalistic'}, window);return document.MM_returnValue">
[img]../../images/catalogue/corp/corporate/suits/1.jpg" border="0" width="650" height="776" alt="" />
</a>
[/*]
<li title="some text">
[h4]some text[/h4]
[/*][/list]
</div>
<div class="dmxBillboardFooter">
<div class="dmxBillboardPageNav"></div>
<div style="clear:both;"></div>
</div>
<div class="dmxBillboardLeftNav middle"></div>
<div class="dmxBillboardRightNav middle"></div>
</div>
<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(
function()
{
jQuery("#Corporate").dmxSlidingBillboard(
{width:"656", height:396, scrollDuration:"normal", design:"dark_blue", sideNavPos:"middle", keyboard:true, mousewheel:true} );
}
);
// ]]>
</script>
</div>
<!-- InstanceEndEditable --></div>
<div id="sidebar">
<h3 class="round2">Categories[/h3]
<div id="p7TMnav">
<div><a href="#" onclick="P7_TMenu(this);return false">+ Corporate Wear</a>
<div><a href="#">Suits</a></div>
<div><a href="#">Jackets</a></div>
<div><a href="#">Shirts/Blouses</a></div>
<div><a href="#">Skirts</a></div>
<div><a href="#">Knitwear</a></div>
<div><a href="#">Accessories</a></div>
</div>
</div>
</div>
</div>
</div>
<div id="fullWidthFooter">
<div id="fullWidthFooter_inner">
<p>©2010. All rights reserved. <a href="#">Privacy Policy</a> | <a href="#">Terms and Conditions</a> | <a href="#">Ordering</a> | <a href="#">Shipping</a> | <a href="#">Returns</a></p>
</div>
</div>
</body>
<!-- InstanceEnd --></html>
Edited by - Gabrielle H on 23 Feb 2010 17:27:15
Replies
Replied 23 Feb 2010 23:49:03
23 Feb 2010 23:49:03 Gabrielle H replied:
Really need some support here guys. Anyone?
Replied 24 Feb 2010 02:43:22
24 Feb 2010 02:43:22 Gabrielle H replied:
I tested this by inserting another billboard into a separate blank page, in the body tags. This version again had the link to the Lightbox, same as my other version that's inserted into a div within the larger layout. When I tested this basic version placed within the body tags, the lightbox link worked.
I don't know why it doesn't work within my own layout though, ie. in my nested div.
Can someone please help?
I don't know why it doesn't work within my own layout though, ie. in my nested div.
Can someone please help?
Replied 24 Feb 2010 09:04:28
24 Feb 2010 09:04:28 Teodor Kuduschiev replied:
Hello Gabriele,
Could you please provide a link to your page?
Could you please provide a link to your page?
Replied 24 Feb 2010 12:34:23
24 Feb 2010 12:34:23 Gabrielle H replied:
Hi Teodor,
I tried to do some troubleshooting myself and I found that if I moved the following two lines of code further down in the source code, this seems to have fixed the problem:
<script language="javascript" type="text/javascript" src="../../dmx/dmx.core.js"></script> <script language="javascript" type="text/javascript" src="../../dmx/widgets/Lightbox/dmx.lightbox.js"></script>
I don't know why sliding billboard inserted them there in the first place but as I need to create further billboards in the next day or two I'll see if the problem re-occurs and post back.
Could I ask another question though? I have a menu on my site with links like the following that point to a php controller page that loads the sliding billboard:
<div><a href="index.php?subcatID=1&itemTypeID=3">Suits</a></div>
The above link loads the first section of a certain billboard but I will need to have other links that load other sections within the same billboard, ie. section 2, 3 etc.
Can you tell me how I can revise the above link to point to subsections of the same billboard?
Appreciate any further assistance.
I tried to do some troubleshooting myself and I found that if I moved the following two lines of code further down in the source code, this seems to have fixed the problem:
<script language="javascript" type="text/javascript" src="../../dmx/dmx.core.js"></script> <script language="javascript" type="text/javascript" src="../../dmx/widgets/Lightbox/dmx.lightbox.js"></script>
I don't know why sliding billboard inserted them there in the first place but as I need to create further billboards in the next day or two I'll see if the problem re-occurs and post back.
Could I ask another question though? I have a menu on my site with links like the following that point to a php controller page that loads the sliding billboard:
<div><a href="index.php?subcatID=1&itemTypeID=3">Suits</a></div>
The above link loads the first section of a certain billboard but I will need to have other links that load other sections within the same billboard, ie. section 2, 3 etc.
Can you tell me how I can revise the above link to point to subsections of the same billboard?
Appreciate any further assistance.
Replied 24 Feb 2010 20:19:18
24 Feb 2010 20:19:18 Gabrielle H replied:
Can I get some assistance?
Replied 26 Feb 2010 11:18:41
26 Feb 2010 11:18:41 Miroslav Zografski replied:
This topic was settled through our live support chat.
Regards,
Regards,