How do I replicate this lightbox feature on my website?

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • bigramz
    New Member
    • Mar 2013
    • 4
    #1

    How do I replicate this lightbox feature on my website?

    Website with feature I want to replicate: http://the-big-bang-theory.com/shop/Official-Clothing/

    Once the shirt is clicked on this page, it takes you to stylin online but also opens a lightbox with content on the-big-bang-theory.com website.

    I have a lightbox plugin installed on my WordPress site and it works when I add the class "fancybox" to my links. I am having difficulty setting it up so it will open the link to the item in a new tab AND open a lightbox in my webpage at the same time with the content I want to display. Any ideas on how I can get it working properly? Code below:


    Code:
    <!-- Link offsite to an eCommerce shop -->
<a href="#link_to_buy" target="_blank"><img src="#image_link" /></a> 
Item Description

<!-- Link to lightbox content -->
<a href="#shop_pop" class="fancybox">CLICK ME!</a>
<div style="display:none" class="fancybox-hidden">
    <div id="shop_pop">
        Lightbox content in here
    </div>
</div>
    Tags: None
    • shadowstrike
      New Member
      • Aug 2013
      • 21
      #2
      Hi

      Please do have a look at my lightbox feature
      Code:
      <html>

<body>

<style type="text/css">
#lightbox {
	display:none;
	background:#000000;
	opacity:0.9;filter:alpha(opacity=90);
	position:absolute;
	top:0px;
	left:0px;
	min-width:100%;
	min-height:100%;
	z-index:1000;
} 

#contact-us-lightbox-panel {
	display:none;
	position:fixed;
	top:100px;
	left:20%;
	margin-left:0px;
	width:900px;
	background:#FFFFFF;
	padding:7px;
	border:2px solid #CCCCCC;
	z-index:1001;
}

#contact-us-lightbox-panel #headerbar-lightbox-panel{
	width: 904px;
}

#contact-us-lightbox-panel #contents_for_address{
	background-color: #a6a6a6;
	width: 904px;
	height: 70px;
	margin-top: 10px;
}

#contact-us-lightbox-panel #contents_for_address #left{
	float: left;
	margin-left: 50px;
	font-family: Helvetica;
	font-size: 14px;
}

#contact-us-lightbox-panel #contents_for_address #left img{
	position: absolute;
	left: 25px;
}

#contact-us-lightbox-panel #contents_for_address #right{
	margin-left: 500px;
	font-family: Helvetica;
	font-size: 14px;
}

#contact-us-lightbox-panel #contents_for_write_to_us{
	margin-top: 10px;
}

#contact-us-lightbox-panel #contents_for_write_to_us textarea{
	width: 880px; 
	height: 150px;
}
 
</style>
<div class="Clickme">ClickMe</div>
<div id="contact-us-lightbox-panel">  
	<div id="headerbar-lightbox-panel"></div>
	<div class="close-panel"><a href="#">X</a></div>
	<div id="contents_for_address">
		<div id="left">
			
			<p>Call Us :</p>
			<p>Office number :0000000</p>
			<p>Toll Free : 0000000</p>
		</div>
		<div id="right">
			<p>Address :</p>
			<p>asdasdsadasd</p>
			<p>dsadasdasdsadas</p>
		</div>
	</div>
	<div id="contents_for_write_to_us">
		<p>Write To Us(Characters 600 Limit)</p>
		<textarea></textarea>
	</div>
	<button class="save-pop">Submit</button>
	<button class="save-pop">Reset</button>
</div>
<div id="lightbox"></div>  

<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".Clickme").click(function(){
    $("#lightbox, #contact-us-lightbox-panel").fadeIn(300); 
  });
   $(".close-panel").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
     $(".save-pop").click(function(){  
    $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  });
});
	
</script>
</body>

<html>
      Make sure that you add the jquery script in the above mentioned code.Lemme know if you were expecting something like this

        Comment

        Previous template Next
        Working...