asked on

jQuery Script Issue

I can't figure out this string to make the lightbox effect work.

This is in a ASPX .net environment. I am using lightbox evo (http://codecanyon.net/item/jquery-lightbox-evolution/115655) plugin.

See code attached.

Thank you in advance!

<script type="text/javascript">
  $(document).ready(function() {
  var imageObj = <%Product.ImageObject%>;
	
	function getImageArr() {
		var imageUrls = new Array();
		for (i = 0; i < imageObj.gallery.length; i++) {
		  imageUrls[i]=imageObj.gallery[i].detailed;
		}
		return imageUrls;
	}
	
    $("#single_image").click(function() {
		var imageArr = getImageArr();
        $.fancybox(imageArr, {
            'padding'           : 0,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'image',
            'changeFade'        : 0
        });
    });

  });
</script> 
<!-- START: Product-Left Module --> 
<div id="product-left">
	<h1><%Product.Name%></h1>
	<!-- START: Product Nav -->
		<ss:if condition="Product.DisplayNextAndPrevious">
			<div id="product-sub-nav" class="clearfix">
				<a href="<%Product.PreviousProductUrl%>" class="previous"><< Previous</a>
				<a href="<%Product.NextProductUrl%>" class="next">Next >></a>
			</div>
		</ss:if>
	<!-- END: Product Nav -->
<!-- START: Product Image -->
	<ss:choose>
		<ss:when condition="Product.ImageCount >= 1 && Product.DisplayImageUrl != ''">
			<a id="single_image" href="#">
				<img src="<%Product.DisplayImageUrl%>" title="<%Product.ImageCaption%>" alt="<%Product.ImageAlternateText%>" border="0" />
			</a>
		</ss:when>
		<ss:otherwise>
			<img src="<%Product.UnavailableImageUrl%>" alt="unavailable" border="0" />
		</ss:otherwise>
	</ss:choose>
   	<!-- END: Product Image -->

Open in new window

Samuel Liew

1) Did you forget to include jquery?
<script src="http://code.jquery.com/jquery-latest.js"></script>

2) Could you show us the HTML output (i.e. View Source) of what this generates?
var imageObj = <%Product.ImageObject%>;

Blue Street Tech

ASKER

Hi Sam2912!

No. i did include the latest jquery build.

OK, give me a bit to work on the latter for you...its not currently in production. i will post the HTML output soon.

Thanks for your comment!

Blue Street Tech

ASKER

Sorry it took me longer than anticipated to get this...had a bad work day.

Attached is the View Source. Thank you

<!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 id="ctl00_headTag"><title>
	California English Homestay - Mary Makena
</title><meta name="keywords" content="Mary Makena, Homestay, Orange County" /><link rel="canonical" href="http://homestayme.com/mary-makena.aspx" /><link rel="stylesheet" href="/themes/default-1/css/global.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/hacks.min.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/ie.min.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/jquery.fancybox-1.3.1.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/main.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/pages.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/reset.min.css" type="text/css" /><link rel="stylesheet" href="/themes/default-1/css/tool-outlines.css" type="text/css" />
  <script type="text/javascript" src="/scripts/storefront.js"></script>    
  
    <style type="text/css" media="all">
		.updateProgress
        {
            display: block;
	        position: relative;
	        background-color: #fff;
	        filter: alpha(opacity=70);
	        -moz-opacity: 0.7;
	        opacity: 0.7;
	        padding: 0px;
	        margin: 0px;
	        border: 0px;
	        background-image: url("../images/indicator.gif");
	        background-repeat: no-repeat;
	        background-position: center center;
	        z-index: 100000;
        }
    </style>
<meta http-equiv="content-type" content="text/html; charset=utf-8" /><meta http-equiv="content-language" content="en-us" /></head>
<body id="ctl00_bodyTag" class="product-page-type mary-makena-page">
 
  <form name="aspnetForm" method="post" action="mary-makena.aspx" onsubmit="javascript:return WebForm_OnSubmit();" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__LASTFOCUS" id="__LASTFOCUS" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="0PDnkNGof5pJ8Bj/WO/C2mHPA/kb8202vBbKSZPF1aUMyrYTQt28KrhfwgFRi+E7qCizV6pm+Z2wJUNmLCtZT/5y/lQGbx65rMmI5mw3ABsUOdizr2PkBJR0VMeCEDlYFHt+lKzv1sAjvVP8cElUmmI4tVJtUhq/2JvemT1/clwy6KKX1aB+1RnW1xLywUeacEn+615ABFKQPSiMJEgEPg7rDZ2ByL/jkS7VKdRnUVBzcxOejjZknhsmfRTMbW6C42z09tOyAlVn5eQwnvT+A082ZONGuR3616Y7EcaIyldgGArPOvRv2qDFTVXk0d1eDXsOjpmPUs0/VupHM5JjKt5vVaL0EIsB+a7q7gXuRf8t1su/Lq8sU1+AyyHmHDpHof09IoSVMsrR8yMKbGlvf47bx6ZrSw2/ky8YSH79bnXkr4s4cuIAJaWlcsF8FxOFaqcvr68svmqy9AvShLYPJJiZa68GIhmZkQTLO88KnfjMDILfs6/IF7zeOYiaa9HUS0tmC/rK+K8smd1okODL5XC3NV6jufGrbHhpLswt0I/eAeA4XwLSQrz0qJoVUTMdzTLLkK1oeb/itEdYiBHotsg0DyoUbeBLikYt2YXsl+vRP/J3lui4l8If/pitrzUpnoYzcvux6cvQK6p4dR8AnfvZ0OUUXnzbF44m60oSTYEhRvUpA35LWNwAlvytBPtaGOe92LAenWbPQ6gUW+4Ulnh1wVGYLaKRSFjLbb7/MzZVyLtQmH5gWmEjwDiTPzlXqzglzO8DdFnZiFGPj+W2v77Sgg+r0gKVEmrW0WMxtXJur46L2i2dhEw5lVN8rngReAaNFUYZq/TCKE7a064cQe2LDDpWDVdKzU7uNBMIjLMUCq/s6wcXJJgwDVXxEaNPNOs6gj6wLSEPx8Jx9USfQCMb5DB4MWFdEXvQmooXklbTjmZqY+rU/qwzwO9phWmkxBi9BHfYfnHFHV0YaCiyaU8nCNQpvieXESEpMBLmxISINZtg6TPlHf/P6xV1l2Y2UZ4zykdgmmmmXKtre/Og2xmuPdq9qGCW+xKJjRfGmyqV2gqqyfXLudjjdXVPd/buPafPkJ40J5M5sOKlFo9s3Xaw8S5ls7cxYi1goz+ll46Z4U4PCwcSFBDBKcx03/gqBAg6gQg5jLUhZ40adHzj8+GN+6KFEd1uVCWaf81dYnyN0f35dWHb5fTE2HLOJw4QLAqxcDcPsGEJ6hcYt8u8ttIPBeZbC2IeZGudNLi5K1mX6D2kIA7jpRC11iJ8t+AwzA5IMOSeZaaNzHvegToeGl5lnFTL5Bg2YlBdGABsfc77LKFlRc7PXEvAsjxVSLVzMLcDi4u0TyNi4ISeNK2TiPiTW36uECxjrudWSAliN4edCUFIiGtfzYqQP7o2tuhSLmklh5fCnBSaUYtAMhRa9xaoAj/ludk0Hys9zw1MYIupHD9+EcesA00lmnuJvLnuKf0BHbFdU5CEPwHTLwR7OzK0LZirBA8EaglNP5lQGKpalzSlKkEmbor/iH6IinMbvSpSsJ9/w49NeqkDRHEpLUBIiGs2Uq5ecXhEj2thIkxnOiIWlu+XuIPXgzmOm6tMLosyfpOSIIx07IS/j7nfp/+EN1CJdddkD6LIP9U+sxW7IfQZH0hnuNSBlI0qBs6hjgGS4ipxebJeIc0p/AAeW0uTkc2fumK7flg4ylaFpmqPtEOKgFYZvszh9yrb8yUgJBKb0yrQXX8m6WKpwtXEdmIwMdAVTvfbrb7iv2KACNAfQqpMt8jB+UW0U+/WF13IUtvGQYcC1mA1YMLtA+c0z5lDH1csaZZHqTYrXtkQKiZfi13aPgIn4kpHcgisglpASTrOZw==" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['aspnetForm'];
if (!theForm) {
    theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/WebResource.axd?d=Xp-r-BsBe7u4l2FtjzH5NpUveDeHJXcl_SWKVSOZCZqmRYhQH7vWSeylaPGl7mJsh9it9W8EEznogaGaamtzS0JpCK81&amp;t=634232162435131018" type="text/javascript"></script>
 
 
<script src="/ScriptResource.axd?d=MMf17kytHLNl8dGbbTZ25b-MAFvqc8RlBrm7hkwJveTCf1BlWu6erLST5jnXsXwF1c5d5nKg3Q66_iGxbTRoGcGZTJMfhjagADikzWc-wWtrFHS6H1oTp3mYaypZcB13IvTarXWRWkhh5Qjy80VWpXjFuYU1&amp;t=ffffffff93dd6de5" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=yXljDxBJwZDfz0A5hjVMdQUu1MQN5UJJlEK6DMfbKTKmBdu3jSL4Tp3M7IlRuq6DkNFWM50DUu2vlwAI_klyK8cWn4UONcUL2438VnHkyp47sMMYTZ9yQ5Zfvwpn8ToD_4FH1wX_7q1ShWX_2iePIxwz1Oc1&amp;t=7abb28a6" type="text/javascript"></script>
<script src="/ScriptResource.axd?d=_IBx8iNi-UBdubQjZUEdYO3SSthxh8wiX1rhIilQVIMKlnsGpX0okG59JF8jF3m9E5Ejtn4RlBo0G1jfsm_cYoF7Pzrm_e9GtNnklGaGH45tODy8VYycT8dkq5gMm2AKLAdE8qFViYha3WQK8rKtC5MCwTuKR0W_GNaC3LQdjM6e8XhK0&amp;t=7abb28a6" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
function WebForm_OnSubmit() {
if (typeof(ValidatorOnSubmit) == "function" && ValidatorOnSubmit() == false) return false;
return true;
}
//]]>
</script>
 
<div>
 
	<input type="hidden" name="__SCROLLPOSITIONX" id="__SCROLLPOSITIONX" value="0" />
	<input type="hidden" name="__SCROLLPOSITIONY" id="__SCROLLPOSITIONY" value="0" />
	<input type="hidden" name="__VIEWSTATEENCRYPTED" id="__VIEWSTATEENCRYPTED" value="" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="v9QVb+pD5tY7havKiBM9ccGAKUoOrHwVB/zEkuUzID3FIqaeEk6Z5yeK/97Pb9zjvDJ3UqzVrdYNEGASFYuxIHjmVWNgkg2li4JgMAt+ZKt7Bha+KqdICTbbVVvUUx3w5DSMj7SIaKeNH3b2xEVRYiP6ifL1IQ/Xqz6bbUerLEBV1B27qqwNDlqT47lmIlChO1GgsOdg9m8JJtuGrw5hx1/nEJPbCsQXbil1Dl6d2RkymET56sWv+vZ2xIR5eovpsY8jgneNQbL4D2c/yjSdkjhnVyD/qUc+VOrmYNC47szS58UZXRy7tumfYYSfLrLF17z+dKPBQZJXiYuMF85g3D0dvoQ=" />
</div>
	
	
	<div>  <style type="text/css">      div.reset-header { border:1px dashed #ddd;color:#000;background:#ddeaf8; }        div.reset-header span, div.reset-header a { font: bold 14px/25px Arial;  font-style:none }        div.reset-header a { margin:0; padding:0; color:blue; text-decoration:underline; }        div.reset-header a:hover { margin:0; padding:0; font-weight:bold; color:purple; text-decoration:underline; }  </style>  <div class="reset-header"><div style="margin:0 10px"><span style="float:left">You are previewing your storefront which is currently: <span style="color:red">Offline</span></span><a style="float:right; margin-left:15px" href="/index.aspx?preview-reset">End Preview</a> <a style="float:right" href="https://homestayme.com/mcp/inventory/products/edit.aspx?product=179" target="_blank">Edit this Product</a> <br style="clear:both" /></div>  </div></div>
	
	<div id="wrapper">				  
	  <table id="ctl00_container" class="page-container" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
	<tr id="ctl00_header">
		<td id="ctl00_headerContent" class="page-header"><!-- START: Header; Top of Page -->
 
<!-- START: header-nav -->
<div id="header-wrapper" class="clearfix">
	<ul id="header-nav">
        <li><a href="/" title="Home">Home</a></li>
		<li><a href="/about-us.aspx" title="About Us">About Us</a></li>
        <li><a href="/english-language-homestay-programs.aspx" title="Homestay Programs">Homestay Programs</a></li>
        <li><a href="/faq.aspx" title="FAQ">FAQ</a></li>
        <li><a href="/press-releases.aspx" title="Press">Press</a></li>
        <li><a href="/partners.aspx" title="Partners">Partners</a></li>
        <li><a href="/contact-us.aspx" title="Contact Us">Contact Us</a></li></ul> 
	</ul><!-- END: header-nav -->
    
	<!-- START: header-logo -->
	<div id="header-logo">
		<a href="/" title="California English Homestay"><img alt="California English Homestay" src="/themes/default-1/images/layout/site_logo.gif" /></a>
	</div><!--</div> END: header-logo -->
    
	<!-- START: header-info -->
	<div id="header-info">
    	Call: (949) 614-0563
	</div>
</div><!-- END: header-wrapper -->
 
<!-- END: Header; Top of Page --></td>
	</tr><tr id="ctl00_body" class="page-body">
		<td id="ctl00_bodyContent" class="page-body-content"><table id="ctl00_columns" class="page-body-columns" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse;">
			<tr>
				<td id="ctl00_leftColumn" class="page-column-left"><table border="0" cellpadding="0" cellspacing="0" class="module category-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_category_lt.gif" alt="Browse Categories" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">Browse by County
  <ul class="module-list cat-nav">
    <li><a href="/los-angeles.aspx">Los Angeles</a></li><li><a href="/orange-county.aspx">Orange County</a></li><li><a href="/riverside.aspx">Riverside</a></li><li><a href="/san-diego.aspx">San Diego</a></li><li><a href="/san-francisco.aspx">San Francisco</a></li>	  
  </ul>  
</td>
					</tr>
				</table>
<table border="0" cellpadding="0" cellspacing="0" class="module product-list-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_featured_lt.gif" alt="Products" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">
      
  <div class="featured-products-item"><a href="rega-petlin-gerrish.aspx">Rega Petlin Gerrish</a></div> 	 
  
</td>
					</tr>
				</table>
<table border="0" cellpadding="0" cellspacing="0" class="module mailing-list-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_mail_lt.gif" alt="Mailing Lists" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">
  <table border="0" cellpadding="0" cellspacing="0" class="mod-body " style="width:100%;">
							<tr>
								<td class="mod-body-tl"></td><td class="mod-body-tp"></td><td class="mod-body-tr"></td>
							</tr><tr>
								<td class="mod-body-lt"></td><td class="mod-body-body">
	<div>	
		
 
		<div id="ctl00_ctl04_mailingList_emailSignup">
									
			<label for="ctl00_ctl04_mailingList_txtEmail" id="ctl00_ctl04_mailingList_lblEmail" class="label">Email Address:</label>
			<input name="ctl00$ctl04$mailingList$txtEmail" type="text" maxlength="255" id="ctl00_ctl04_mailingList_txtEmail" class="textbox mailing-list-module-text" />
			
		
								</div>
		
		<table id="ctl00_ctl04_mailingList_cblMailingLists" border="0" style="width:100%;">
									<tr>
										<td><input id="ctl00_ctl04_mailingList_cblMailingLists_0" type="checkbox" name="ctl00$ctl04$mailingList$cblMailingLists$0" /><label for="ctl00_ctl04_mailingList_cblMailingLists_0">Reasons to Visit the OC</label></td>
									</tr><tr>
										<td><input id="ctl00_ctl04_mailingList_cblMailingLists_1" type="checkbox" name="ctl00$ctl04$mailingList$cblMailingLists$1" /><label for="ctl00_ctl04_mailingList_cblMailingLists_1">Dancing</label></td>
									</tr>
								</table>
		
		<input type="image" name="ctl00$ctl04$mailingList$imbSubmit" id="ctl00_ctl04_mailingList_imbSubmit" src="/themes/default-1/images/buttons/mod_btn_submit.gif" alt="Submit" style="border-width:0px;margin-top: 5px" />	
	
</div>
  </td><td class="mod-body-rt"></td>
							</tr><tr>
								<td class="mod-body-bl"></td><td class="mod-body-bt"></td><td class="mod-body-br"></td>
							</tr>
						</table>
</td>
					</tr>
				</table>
</td><td id="ctl00_centerColumn" class="page-column-center"><div id="ctl00_breadcrumb" class="breadcrumb">
					
					  <span id="ctl00_breadcrumbContent"><span><a href="/">Home</a></span><span>&#160;&gt;&#160;</span><span><a href="/orange-county.aspx">Orange County</a></span><span>&#160;&gt;&#160;</span><span>Mary Makena</span></span>
					
				</div>
    <div id="ctl00_pageContent_productAjaxPanel">
					
        <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$pageContent$scriptManager', document.getElementById('aspnetForm'));
Sys.WebForms.PageRequestManager.getInstance()._updateControls(['tctl00$pageContent$productDetailUpdatePanel'], [], ['ctl00$pageContent$addToCart'], 90);
					//]]>
</script>
 
        <div id="ctl00_pageContent_productDetailUpdatePanel">
						
                <div id="product-detail-div" class="product-detail">
                    <script type="text/javascript" src="assets/javascript/jquery-1.4.3.min.js"></script>
<!--<script type="text/javascript" src="assets/javascript/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="themes/default-1/css/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />-->
<!--<script type="text/javascript">
  $(document).ready(function() {
  var imageObj = < %Product.ImageObject%>;
	
	function getImageArr() {
		var imageUrls = new Array();
		for (i = 0; i < imageObj.gallery.length; i++) {
		  imageUrls[i]=imageObj.gallery[i].detailed;
		}
		return imageUrls;
	}
	
    $("#single_image").click(function() {
		var imageArr = getImageArr();
        $.fancybox(imageArr, {
            'padding'           : 0,
            'transitionIn'      : 'none',
            'transitionOut'     : 'none',
            'type'              : 'image',
            'changeFade'        : 0
        });
    });
 
  });
</script> -->
<link rel="stylesheet" type="text/css" href="assets/javascript/products-lightbox-evo/default.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="assets/javascript/products-lightbox-evo/default.lightbox.ie6.css" /><![endif]-->
 
<script type="text/javascript" src="assets/javascript/products-lightbox-evo/jquery.lightbox.js"></script>
 
<script type="text/javascript"> 
  jQuery(document).ready(function(){
    jQuery('.lightbox').lightbox();
  });
</script>
 
<!-- START: Product-Left Module --> 
<div id="product-left">
	<h1>Mary Makena</h1>
	<!-- START: Product Nav -->
					<div id="product-sub-nav" class="clearfix">
				<a href="/mary-makena.aspx?previous" class="previous"><< Previous</a>
				<a href="/mary-makena.aspx?next" class="next">Next >></a>
			</div>
			<!-- END: Product Nav -->
<!-- START: Product Image -->
				<a class="lightbox" href="#">
				<img src="/images/products/display/marymakena.jpg" title="" alt="" border="0" />
			</a>
		   	<!-- END: Product Image -->
</div>
<!-- END: Product-Left Module --> 
 
 
<!-- START: Product-Right Module -->
<div id="product-right">
	<!-- START: Price -->
    	<!-- END: Price -->
<!-- START: Discount Group Price -->
    		<div class="prod-detail-cost">
        	<span class="prod-detail-cost-label">Price:</span>
            <span class="prod-detail-cost-value">Starting at $1,600.00</span>
		</div>
        <!-- END: Discount Group Price -->
<!-- START: Sale -->
    	<!-- END: Sale -->
<!-- START: Discount Savings -->
	    <!-- END: Discount Savings -->
<!-- START: Part# -->
	    <!-- END: Part# -->
<!-- START: InStock Msg -->
	    <!-- END: InStock Msg -->
<!-- START: Variation/Size -->
			<div class="prod-variations clearfix">
			<h3>Select Size</h3>
        	<table cellpadding="2" border="0">
							<tr>
								<td align="right"><label for="ctl00_pageContent_ddlVariationGroup52" class="label">Program:</label></td><td><select name="ctl00$pageContent$ddlVariationGroup52" onchange="javascript:setTimeout('__doPostBack(\'ctl00$pageContent$ddlVariationGroup52\',\'\')', 0)" id="ctl00_pageContent_ddlVariationGroup52" class="select">
									<option value="Select Program" selected="selected">
										Select Program
									</option><option value="177">
										Intense-English, 15-hour
									</option><option value="178">
										Intense-English, 20-hour
									</option><option value="179">
										Women's Advantage, 20-hour
									</option><option value="180">
										English-Squash, 15-hour
									</option><option value="181">
										English-Dance, 15-hour
									</option><option value="182">
										English-Dance, 20-hour
									</option>
								</select></td>
							</tr><tr>
								<td align="right"><label for="ctl00_pageContent_ddlVariationGroup53" class="label">Duration:</label></td><td><select name="ctl00$pageContent$ddlVariationGroup53" onchange="javascript:setTimeout('__doPostBack(\'ctl00$pageContent$ddlVariationGroup53\',\'\')', 0)" id="ctl00_pageContent_ddlVariationGroup53" class="select">
									<option value="Select Duration" selected="selected">
										Select Duration
									</option><option value="183">
										1 week
									</option><option value="184">
										2 weeks
									</option><option value="185">
										3 weeks
									</option>
								</select></td>
							</tr><tr>
								<td align="right"><label for="ctl00_pageContent_ddlVariationGroup54" class="label">Airport Pick-up:</label></td><td><select name="ctl00$pageContent$ddlVariationGroup54" onchange="javascript:setTimeout('__doPostBack(\'ctl00$pageContent$ddlVariationGroup54\',\'\')', 0)" id="ctl00_pageContent_ddlVariationGroup54" class="select">
									<option value="Select Airport Pick-up" selected="selected">
										Select Airport Pick-up
									</option><option value="186">
										Weekday Airport Pick-up [+$300]
									</option><option value="187">
										Weekend Airport Pick-up [+$100]
									</option><option value="188">
										No Airport Pick-up
									</option>
								</select></td>
							</tr>
						</table>			<span>Sizing Guide</span>
		</div>
        <!-- END: Variation/Size -->
<!-- START: Add to Cart -->
	<div class="prod-add-cart clearfix">
		<div class="prod-detail-purchase" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_pageContent_addToCart')">
							<label for="ctl00_pageContent_txtQuantity" class="label">Quantity:</label><input name="ctl00$pageContent$txtQuantity" type="text" value="1" maxlength="10" size="3" id="ctl00_pageContent_txtQuantity" class="textbox-center" /><input type="image" name="ctl00$pageContent$addToCart" id="ctl00_pageContent_addToCart" class="prod-detail-add" src="/themes/default-1/images/buttons/cart_btn_add.gif" onclick="alert('You must first select Your Program Options'); return false;WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$pageContent$addToCart&quot;, &quot;&quot;, true, &quot;&quot;, &quot;&quot;, false, false))" style="border-width:0px;" /><span id="ctl00_pageContent_ctl39" style="color:Red;display:none;"><br />* Whole number only</span>
						</div>	</div>
    <!-- END: Add to Cart -->
<!-- START: Add to Shoping List -->
				<div class="prod-add-shop-list">
            <h3>'s Wish List(s)</h3>
    		</div>
		<!-- END: Add to Shoping List -->
<!-- START: Product Description -->
            <div class="prod-detail-desc"><p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<script type="text/javascript" src="assets/javascript/jquery-1.4.3.min.js"></script>
<script type="text/javascript" src="assets/javascript/tabs/jquery.idTabs.min.js"></script>
 
    <div id="advanced" >
      <div class="example">
        <span><em>Strange arguments and url changing</em></span><pre></pre><div>
 
          <div id="adv1" class="usual">
            <ul>
              <li><a href="#t1">Tab 1</a></li>
              <li><a href="#t2">Tab 2</a></li>
              <li><a href="#t3">Tab 3</a></li>
            </ul>
            <div id="t1">This is tab 1.</div>
            <div id="t2">More content in tab 2.</div>
            <div id="t3">Tab 3 is always last!</div>
          </div>
 
          <script type="text/javascript">
            var settings = { start:1, change:false };
            $("#adv1 ul").idTabs(settings,true);
          </script></div>
        <!-- END: Product Description -->
<!-- START: Other Attributes ?? -->
			<div class="product-attributes"><div class="product-attribute attribute-smoking"><span class="product-attribute-name attribute-smoking-name"><strong>Smoking:</strong></span> <span class="product-attribute-value attribute-smoking-value"><a rel="nofollow" href="/search.aspx?smoking=no-outdoors-only">No (outdoors only!)</a></span></div><div class="product-attribute attribute-kid-s"><span class="product-attribute-name attribute-kid-s-name"><strong>Kid(s):</strong></span> <span class="product-attribute-value attribute-kid-s-value"><a rel="nofollow" href="/search.aspx?kid-s=no">No</a></span></div><div class="product-attribute attribute-dog-s"><span class="product-attribute-name attribute-dog-s-name"><strong>Dog(s):</strong></span> <span class="product-attribute-value attribute-dog-s-value"><a rel="nofollow" href="/search.aspx?dog-s=yes">Yes</a></span></div><div class="product-attribute attribute-cat-s"><span class="product-attribute-name attribute-cat-s-name"><strong>Cat(s):</strong></span> <span class="product-attribute-value attribute-cat-s-value"><a rel="nofollow" href="/search.aspx?cat-s=yes">Yes</a></span></div><div style="visibility:hidden;clear:both"></div></div>	    <!-- END: Other Attributes ?? -->
<!-- START: Shipping Msg -->
        <!-- END: Shipping Msg -->
<!-- START: Package Count -->
	    <!-- END: Package Count -->
<!-- START: Personalization -->
			<div style="margin-top:20px">
			<h3>Your Homestay Preferences</h3>
			<div id="ctl00_pageContent_ppQuestions_questions" class="personalization-questions">
							<p class="text-important">* denotes required field</p><div id="ctl00_pageContent_ppQuestions_question-2471" class="personalization-question">
								<span class="personalization-question-label">Arrival Date</span><span class="text-required">*</span><div id="ctl00_pageContent_ppQuestions_pnlPQ2471Answers" class="personalization-answer text-answer">
									<span id="ctl00_pageContent_ppQuestions_ctl01" class="text-required" style="display:none;">You must enter text for 'Arrival Date'.<br /></span><div>
										<input name="ctl00$pageContent$ppQuestions$txtPQ2471PA17794" type="text" maxlength="10" id="ctl00_pageContent_ppQuestions_txtPQ2471PA17794" class="textbox" />
									</div><div style="clear:both;visibility:hidden"></div>
								</div>
							</div>
						</div><div style="clear:both;visibility:hidden"></div>
		</div>
	           
    <!-- END: Personalization -->
<!-- START: Promo Icons ******MOVE BETWEEN SAVINGS & VARIATION******* -->
        <!-- END: Promo Icons -->
<!-- START: QTY Discount -->
	    <!-- END: ?QTY Discount -->
<!-- START: Email A Friend -->
    		<div class="prod-detail-email-friend">
			<a onclick="Window.open('/email-a-friend.aspx?product=179','email-a-friend',550,400,1,0);return false;" href="/email-a-friend.aspx?product=179" target="_blank">Email A Friend</a>
		</div>
	    <!-- END: Email A Friend -->
<!-- START: AddThis Buttons -->
	<div class="addthis_toolbox addthis_default_style">
        <a class="addthis_button_email"></a>
        <a class="addthis_button_print"></a>
        <a class="addthis_button_favorites"></a>
        <span class="addthis_separator">|</span>
		<a class="addthis_button_myspace"></a>
        <a class="addthis_button_delicious"></a>
        <a class="addthis_button_stumbleupon"></a>
		<a class="addthis_button_live"></a>
		<a class="addthis_button_google"></a>
		<br />
        <a class="addthis_button_facebook"></a>
        <a class="addthis_button_facebook_like" fb:like:layout="button_count"></a>
		<a class="addthis_button_tweet"></a>
        <a class="addthis_counter addthis_pill_style"></a>
    </div>
    <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script>
    <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js#username=bcpcreations"></script>
    <!-- END: AddThis Buttons -->
    
 
 
 
<!-- START: Config Code -->
		<!-- END: Config Code -->
<!-- START: MFG -->
		<!-- END: MFG -->
<!-- START: MPN -->
		<!-- END: MPN -->
 
 
<!-- ------- START NOTE: In future, if enabled move to Product Bottom Mod ------- -->
<!-- START: Product Rating -->
	 
	<!-- END: Product Rating -->
 
 
   
<!-- START: Product Reviews -->
	<div class="prod-detail-reviews">
		<a name="reviews"></a>
 
<h3 style="margin-top:20px">Customer Reviews</h3>
 
<div class="prod-detail-rating-add">
  <table cellpadding="0" cellspacing="3" width="100%">
    <tr>
      <td>
		
			Rate This Product: <table cellpadding="0" cellspacing="0" class="rating-container"><tr><td><input type="image" name="ctl00$pageContent$ctl101$add-rate-1" id="ctl00_pageContent_ctl101_add-rate-1" title="Rate this: 1" onmouseover="MC.swapRatingImage(this.id,1,'themes/default-1')" onmouseout="MC.swapRatingImage(this.id,0,'themes/default-1')" src="/themes/default-1/images/layout/rating-none.gif" style="border-width:0px;" /></td><td><input type="image" name="ctl00$pageContent$ctl101$add-rate-2" id="ctl00_pageContent_ctl101_add-rate-2" title="Rate this: 2" onmouseover="MC.swapRatingImage(this.id,2,'themes/default-1')" onmouseout="MC.swapRatingImage(this.id,0,'themes/default-1')" src="/themes/default-1/images/layout/rating-none.gif" style="border-width:0px;" /></td><td><input type="image" name="ctl00$pageContent$ctl101$add-rate-3" id="ctl00_pageContent_ctl101_add-rate-3" title="Rate this: 3" onmouseover="MC.swapRatingImage(this.id,3,'themes/default-1')" onmouseout="MC.swapRatingImage(this.id,0,'themes/default-1')" src="/themes/default-1/images/layout/rating-none.gif" style="border-width:0px;" /></td><td><input type="image" name="ctl00$pageContent$ctl101$add-rate-4" id="ctl00_pageContent_ctl101_add-rate-4" title="Rate this: 4" onmouseover="MC.swapRatingImage(this.id,4,'themes/default-1')" onmouseout="MC.swapRatingImage(this.id,0,'themes/default-1')" src="/themes/default-1/images/layout/rating-none.gif" style="border-width:0px;" /></td><td><input type="image" name="ctl00$pageContent$ctl101$add-rate-5" id="ctl00_pageContent_ctl101_add-rate-5" title="Rate this: 5" onmouseover="MC.swapRatingImage(this.id,5,'themes/default-1')" onmouseout="MC.swapRatingImage(this.id,0,'themes/default-1')" src="/themes/default-1/images/layout/rating-none.gif" style="border-width:0px;" /></td></tr></table> or <a id="ctl00_pageContent_ctl101_hlCreateReview" href="product-reviews-add.aspx?product=179">Create a Review</a>
		  
	  </td>
      <td style="text-align:right"></td>
    </tr>
  </table>  
</div>
 
<div class="prod-detail-rating-stat">
  <table cellpadding="0" cellspacing="3" width="100%">
    <tr>
	  <td><strong>(0 Ratings, 0 Reviews)</strong></td>
	  <td style="text-align:right">
		
	  </td>
	</tr>
  </table>
</div>
 
<div>
 
						</div>
	</div>
	<!-- END: Reviews -->
 
<!-- ------- END NOTE: In future, if enabled move to Product Bottom Mod ------- -->
    
    
</div>
<!-- END: Product-Right Module -->
 
 
		<!-- </td> to CLOSE dynamic include via .net "<td class="page-column-center" 	id="ctl00_centerColumn">" -->
        
        
<!-- START: Product Bottom Module -->
<div class="product-bottom">
<!-- ------- START NOTE: In future, if Reviews are enabled move to Product-Right Mod ------- -->
<!-- START: Suggested Items -->
	<div class="prod-detail-rel-prod">
    		</div>
	<!-- END: Suggested Items -->
<!-- ------- END NOTE: In future, if Reviews are enabled move to Product-Right Mod ------- -->
</div>
<!-- END: Product Bottom Module -->		
                </div>
            
					</div>
 
        <script language="javascript" type="text/javascript">
            var overlay = null;
            Sys.Application.add_load(function (sender, args) {
                var prm = Sys.WebForms.PageRequestManager.getInstance();
                prm.add_initializeRequest(InitializeRequest);
            });
 
            function InitializeRequest(sender, args) {
                var productDetail = document.getElementById("product-detail-div");
 
                if (productDetail != null) {
                    if (overlay == null) {
                        overlay = document.createElement("div");
                        overlay.id = "product-detail-overlay";
                        overlay.setAttribute("class", "updateProgress");
                    }
 
                    var width = 0;
                    var height = 0;
 
                    if (productDetail.currentStyle) {
                        var paddingLeft = productDetail.currentStyle.paddingLeft.replace(/px,*\)*/g, "");
                        var paddingTop = productDetail.currentStyle.paddingTop.replace(/px,*\)*/g, "");
 
                        width = (productDetail.offsetWidth - paddingLeft - 1) + "px";
                        height = (productDetail.offsetHeight - paddingTop - 1) + "px";
                    }
                    else if (document.defaultView) {
                        width = document.defaultView.getComputedStyle(productDetail, '').getPropertyValue("width");
                        height = document.defaultView.getComputedStyle(productDetail, '').getPropertyValue("height");
                    }
 
                    if (width != 0 && height != 0) {
                        overlay.style.width = width;
                        overlay.style.height = height;
                        overlay.style.top = "-" + overlay.style.height;
 
                        productDetail.style.width = width;
                        productDetail.style.height = height;
 
                        productDetail.appendChild(overlay);
                    }
                }
            }
        </script>
    
				</div>
</td><td id="ctl00_rightColumn" class="page-column-right"><table border="0" cellpadding="0" cellspacing="0" class="module search-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_search_rt.gif" alt="Search" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">
	<table border="0" cellpadding="0" cellspacing="0" class="mod-body " style="width:100%;">
							<tr>
								<td class="mod-body-tl"></td><td class="mod-body-tp"></td><td class="mod-body-tr"></td>
							</tr><tr>
								<td class="mod-body-lt"></td><td class="mod-body-body">
		<div id="ctl00_ctl05_pnlSearch" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ctl05_imbGo')">
									
			<table cellpadding="0" cellspacing="0" style="margin: 0; padding: 0; border: none; border-collapse: collapse;">
				<tr>
					<td style="padding-right: 5px; width: 93%; vertical-align: middle;">
						<input name="ctl00$ctl05$txtSearch" type="text" maxlength="100" id="ctl00_ctl05_txtSearch" class="textbox search-module-text" />
					</td>
					<td style="vertical-align: middle; text-align: right;">
						<input type="image" name="ctl00$ctl05$imbGo" id="ctl00_ctl05_imbGo" src="/themes/default-1/images/buttons/mod_btn_go.gif" alt="Go" style="border-width:0px;" />
					</td>
				</tr>
			</table>
		
								</div>
		
	</td><td class="mod-body-rt"></td>
							</tr><tr>
								<td class="mod-body-bl"></td><td class="mod-body-bt"></td><td class="mod-body-br"></td>
							</tr>
						</table>
</td>
					</tr>
				</table>
<table border="0" cellpadding="0" cellspacing="0" class="module login-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_login_rt.gif" alt="Account Login" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">
 
  <table border="0" cellpadding="0" cellspacing="0" class="mod-body " style="width:100%;">
							<tr>
								<td class="mod-body-tl"></td><td class="mod-body-tp"></td><td class="mod-body-tr"></td>
							</tr><tr>
								<td class="mod-body-lt"></td><td class="mod-body-body">
					 
	
		  <div id="ctl00_ctl06_lvDisplay_pnlLogin" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'ctl00_ctl06_lvDisplay_imbGo')">
									
		    <table cellpadding="0" cellspacing="0" style="table-layout:fixed; width:100%">
		      <tr>
						<td>
							<label for="ctl00_ctl06_lvDisplay_txtUsername" id="ctl00_ctl06_lvDisplay_lblUsername" class="label">Email Address:</label>
							<input name="ctl00$ctl06$lvDisplay$txtUsername" type="text" maxlength="255" id="ctl00_ctl06_lvDisplay_txtUsername" class="textbox login-module-user" />
						</td>
		      </tr>
		      <tr>
						<td>
							<label for="ctl00_ctl06_lvDisplay_txtPassword" id="ctl00_ctl06_lvDisplay_lblPassword" class="label">Password:</label>
				
							
									<div id="password-message"><small>You will be prompted to enter your password on the next page</small></div>
								
						</td>
		      </tr>
		    </table>
				<div style="margin: 10px 0;">
					
				</div>
				
				<div style="text-align:right;margin-top:7px;">
					<input type="image" name="ctl00$ctl06$lvDisplay$imbGo" id="ctl00_ctl06_lvDisplay_imbGo" src="/themes/default-1/images/buttons/mod_btn_signin.gif" style="border-width:0px;" /><br />
					<a id="ctl00_ctl06_lvDisplay_hypCreate" href="register.aspx">Create an account</a><br />
					<a id="ctl00_ctl06_lvDisplay_hypForgot" href="send-password.aspx">Forgot Password?</a>
				</div>
		  
								</div>
		
  		  
  </td><td class="mod-body-rt"></td>
							</tr><tr>
								<td class="mod-body-bl"></td><td class="mod-body-bt"></td><td class="mod-body-br"></td>
							</tr>
						</table> 
 
</td>
					</tr>
				</table>
<table border="0" cellpadding="0" cellspacing="0" class="module cart-module" style="width:100%;">
					<tr>
						<td class="module-header"><img src="/themes/default-1/images/layout/mod_head_cart_rt.gif" alt="Shopping Cart" style="border-width:0px;" /></td>
					</tr><tr>
						<td class="module-body">
	<table border="0" cellpadding="0" cellspacing="0" class="mod-body cart-module-cart" style="width:100%;">
							<tr>
								<td class="mod-body-tl"></td><td class="mod-body-tp"></td><td class="mod-body-tr"></td>
							</tr><tr>
								<td class="mod-body-lt"></td><td class="mod-body-body">
		
				<div style="text-align: center; font-weight: bold;">
					Your cart is empty.</div>
			
	</td><td class="mod-body-rt"></td>
							</tr><tr>
								<td class="mod-body-bl"></td><td class="mod-body-bt"></td><td class="mod-body-br"></td>
							</tr>
						</table>
	
	
</td>
					</tr>
				</table>
 
</td>
			</tr>
		</table></td>
	</tr><tr id="ctl00_footer" class="page-footer">
		<td id="ctl00_footerContent" class="page-footer-content"></td>
	</tr>
</table>
	  
	</div>
 
	<script type="text/javascript" src="http://www.google-analytics.com/ga.js"></script>
  
  <script type="text/javascript">
    var pageTracker = _gat._getTracker("UA-15307485-1");
    pageTracker._initData();
    pageTracker._trackPageview();
  </script>
  
  
 
  
  
<script type="text/javascript"> 
//<![CDATA[
var Page_Validators =  new Array(document.getElementById("ctl00_pageContent_ctl39"), document.getElementById("ctl00_pageContent_ppQuestions_ctl01"));
//]]>
</script>
 
<script type="text/javascript"> 
//<![CDATA[
var ctl00_pageContent_ctl39 = document.all ? document.all["ctl00_pageContent_ctl39"] : document.getElementById("ctl00_pageContent_ctl39");
ctl00_pageContent_ctl39.controltovalidate = "ctl00_pageContent_txtQuantity";
ctl00_pageContent_ctl39.focusOnError = "t";
ctl00_pageContent_ctl39.errormessage = "<br />* Whole number only";
ctl00_pageContent_ctl39.display = "Dynamic";
ctl00_pageContent_ctl39.type = "Integer";
ctl00_pageContent_ctl39.evaluationfunction = "RangeValidatorEvaluateIsValid";
ctl00_pageContent_ctl39.maximumvalue = "999999";
ctl00_pageContent_ctl39.minimumvalue = "1";
var ctl00_pageContent_ppQuestions_ctl01 = document.all ? document.all["ctl00_pageContent_ppQuestions_ctl01"] : document.getElementById("ctl00_pageContent_ppQuestions_ctl01");
ctl00_pageContent_ppQuestions_ctl01.errormessage = "You must enter text for \'Arrival Date\'.<br />";
ctl00_pageContent_ppQuestions_ctl01.display = "Dynamic";
ctl00_pageContent_ppQuestions_ctl01.evaluationfunction = "CustomValidatorEvaluateIsValid";
ctl00_pageContent_ppQuestions_ctl01.clientvalidationfunction = "ValidatePQ2471";
//]]>
</script>
 
 
<script type="text/javascript"> 
//<![CDATA[
 
var Page_ValidationActive = false;
if (typeof(ValidatorOnLoad) == "function") {
    ValidatorOnLoad();
}
 
function ValidatorOnSubmit() {
    if (Page_ValidationActive) {
        return ValidatorCommonOnSubmit();
    }
    else {
        return true;
    }
}
        function ValidatePQ2471(sender, args) {
  var answerIds = new Array(
    "ctl00_pageContent_ppQuestions_txtPQ2471PA17794");
 
  var valid = false;
 
  for (i in answerIds) {
    var answerCtrl = document.getElementById(answerIds[i]);
 
    if (answerCtrl && answerCtrl.value.length > 0) {
      valid = true;
      break;
    }
  }
 
  args.IsValid = valid;
}
 
 
theForm.oldSubmit = theForm.submit;
theForm.submit = WebForm_SaveScrollPositionSubmit;
 
theForm.oldOnSubmit = theForm.onsubmit;
theForm.onsubmit = WebForm_SaveScrollPositionOnSubmit;
Sys.Application.initialize();
 
document.getElementById('ctl00_pageContent_ctl39').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ctl00_pageContent_ctl39'));
}
 
document.getElementById('ctl00_pageContent_ppQuestions_ctl01').dispose = function() {
    Array.remove(Page_Validators, document.getElementById('ctl00_pageContent_ppQuestions_ctl01'));
}
//]]>
</script>
</form> 
  
  <script type="text/javascript" src="/scripts/defaultButtons.js"></script>  
</body>
</html>

Open in new window

Blue Street Tech

ASKER

These are the errors i get when i click on the image.

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; Tablet PC 2.0; .NET4.0C; InfoPath.3; MS-RTC LM 8)
Timestamp: Thu, 18 Nov 2010 02:36:31 UTC

Message: '_gat' is undefined /*This is a depricated google analytics error*/
Line: 603
Char: 5
Code: 0

Message: Object doesn't support this property or method
Line: 219
Char: 5
Code: 0

Message: Object doesn't support this property or method
Line: 219
Char: 5
Code: 0

Samuel Liew

From what I can tell,

var imageObj = < %Product.ImageObject%>;

is not a valid JavaScript statement, and

< %Product.ImageObject%>

isn't doing anything. Did you mean to use:

<%= Product.ImageObject %>

to print a server-side variable to let JavaScript access it?

Blue Street Tech

ASKER

Well i commented out that part. i had to add a space as it would not comment completely until i did so. It was originally <%Product.ImageObject%>, which is a dynamic include - part of the .net framework of the site. However, i do not want to use that portion anyway, which is why i commented it out but if i read you right it makes no diff as it was doing nothing anyway.

If i am starting over from scratch...all i desire is for the image(s) to pop up in the lightbox when the single image is clicked.

I included the code that the site's author says i need in order to get his plugin working below.
I included another snippet of code that is suppose to be the trigger for the lightbox, however, don't you think i should change "assets/1.jpg" to "<%Product.DisplayImageUrl%>" ?

<link rel="stylesheet" type="text/css" href="assets/javascript/products-lightbox-evo/default.lightbox.css" />
<!--[if IE 6]><link rel="stylesheet" type="text/css" href="assets/javascript/products-lightbox-evo/default.lightbox.ie6.css" /><![endif]-->
 
<script type="text/javascript" src="assets/javascript/products-lightbox-evo/jquery.lightbox.js"></script>
 
<script type="text/javascript"> 
  jQuery(document).ready(function(){
    jQuery('.lightbox').lightbox();
  });
</script>

Open in new window

<!-- this is all i am suppose to include to active the image lightbox -->

<a href="assets/1.jpg" class="lightbox"><img src="assets/m1.jpg" alt=""/></a>

Open in new window

ASKER CERTIFIED SOLUTION

Blue Street Tech

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Blue Street Tech

ASKER

I found my own solution.