473,324 Members | 1,646 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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:


Expand|Select|Wrap|Line Numbers
  1. <!-- Link offsite to an eCommerce shop -->
  2. <a href="#link_to_buy" target="_blank"><img src="#image_link" /></a> 
  3. Item Description
  4.  
  5. <!-- Link to lightbox content -->
  6. <a href="#shop_pop" class="fancybox">CLICK ME!</a>
  7. <div style="display:none" class="fancybox-hidden">
  8.     <div id="shop_pop">
  9.         Lightbox content in here
  10.     </div>
  11. </div>
Apr 30 '13 #1

✓ answered by shadowstrike

Hi

Please do have a look at my lightbox feature
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <body>
  4.  
  5. <style type="text/css">
  6. #lightbox {
  7.     display:none;
  8.     background:#000000;
  9.     opacity:0.9;filter:alpha(opacity=90);
  10.     position:absolute;
  11.     top:0px;
  12.     left:0px;
  13.     min-width:100%;
  14.     min-height:100%;
  15.     z-index:1000;
  16.  
  17. #contact-us-lightbox-panel {
  18.     display:none;
  19.     position:fixed;
  20.     top:100px;
  21.     left:20%;
  22.     margin-left:0px;
  23.     width:900px;
  24.     background:#FFFFFF;
  25.     padding:7px;
  26.     border:2px solid #CCCCCC;
  27.     z-index:1001;
  28. }
  29.  
  30. #contact-us-lightbox-panel #headerbar-lightbox-panel{
  31.     width: 904px;
  32. }
  33.  
  34. #contact-us-lightbox-panel #contents_for_address{
  35.     background-color: #a6a6a6;
  36.     width: 904px;
  37.     height: 70px;
  38.     margin-top: 10px;
  39. }
  40.  
  41. #contact-us-lightbox-panel #contents_for_address #left{
  42.     float: left;
  43.     margin-left: 50px;
  44.     font-family: Helvetica;
  45.     font-size: 14px;
  46. }
  47.  
  48. #contact-us-lightbox-panel #contents_for_address #left img{
  49.     position: absolute;
  50.     left: 25px;
  51. }
  52.  
  53. #contact-us-lightbox-panel #contents_for_address #right{
  54.     margin-left: 500px;
  55.     font-family: Helvetica;
  56.     font-size: 14px;
  57. }
  58.  
  59. #contact-us-lightbox-panel #contents_for_write_to_us{
  60.     margin-top: 10px;
  61. }
  62.  
  63. #contact-us-lightbox-panel #contents_for_write_to_us textarea{
  64.     width: 880px; 
  65.     height: 150px;
  66. }
  67.  
  68. </style>
  69. <div class="Clickme">ClickMe</div>
  70. <div id="contact-us-lightbox-panel">  
  71.     <div id="headerbar-lightbox-panel"></div>
  72.     <div class="close-panel"><a href="#">X</a></div>
  73.     <div id="contents_for_address">
  74.         <div id="left">
  75.  
  76.             <p>Call Us :</p>
  77.             <p>Office number :0000000</p>
  78.             <p>Toll Free : 0000000</p>
  79.         </div>
  80.         <div id="right">
  81.             <p>Address :</p>
  82.             <p>asdasdsadasd</p>
  83.             <p>dsadasdasdsadas</p>
  84.         </div>
  85.     </div>
  86.     <div id="contents_for_write_to_us">
  87.         <p>Write To Us(Characters 600 Limit)</p>
  88.         <textarea></textarea>
  89.     </div>
  90.     <button class="save-pop">Submit</button>
  91.     <button class="save-pop">Reset</button>
  92. </div>
  93. <div id="lightbox"></div>  
  94.  
  95. <script src="js/jquery.min.js"></script>
  96. <script type="text/javascript">
  97. $(document).ready(function(){
  98.   $(".Clickme").click(function(){
  99.     $("#lightbox, #contact-us-lightbox-panel").fadeIn(300); 
  100.   });
  101.    $(".close-panel").click(function(){  
  102.     $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  103.   });
  104.      $(".save-pop").click(function(){  
  105.     $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  106.   });
  107. });
  108.  
  109. </script>
  110. </body>
  111.  
  112. <html>
Make sure that you add the jquery script in the above mentioned code.Lemme know if you were expecting something like this

1 1536
Hi

Please do have a look at my lightbox feature
Expand|Select|Wrap|Line Numbers
  1. <html>
  2.  
  3. <body>
  4.  
  5. <style type="text/css">
  6. #lightbox {
  7.     display:none;
  8.     background:#000000;
  9.     opacity:0.9;filter:alpha(opacity=90);
  10.     position:absolute;
  11.     top:0px;
  12.     left:0px;
  13.     min-width:100%;
  14.     min-height:100%;
  15.     z-index:1000;
  16.  
  17. #contact-us-lightbox-panel {
  18.     display:none;
  19.     position:fixed;
  20.     top:100px;
  21.     left:20%;
  22.     margin-left:0px;
  23.     width:900px;
  24.     background:#FFFFFF;
  25.     padding:7px;
  26.     border:2px solid #CCCCCC;
  27.     z-index:1001;
  28. }
  29.  
  30. #contact-us-lightbox-panel #headerbar-lightbox-panel{
  31.     width: 904px;
  32. }
  33.  
  34. #contact-us-lightbox-panel #contents_for_address{
  35.     background-color: #a6a6a6;
  36.     width: 904px;
  37.     height: 70px;
  38.     margin-top: 10px;
  39. }
  40.  
  41. #contact-us-lightbox-panel #contents_for_address #left{
  42.     float: left;
  43.     margin-left: 50px;
  44.     font-family: Helvetica;
  45.     font-size: 14px;
  46. }
  47.  
  48. #contact-us-lightbox-panel #contents_for_address #left img{
  49.     position: absolute;
  50.     left: 25px;
  51. }
  52.  
  53. #contact-us-lightbox-panel #contents_for_address #right{
  54.     margin-left: 500px;
  55.     font-family: Helvetica;
  56.     font-size: 14px;
  57. }
  58.  
  59. #contact-us-lightbox-panel #contents_for_write_to_us{
  60.     margin-top: 10px;
  61. }
  62.  
  63. #contact-us-lightbox-panel #contents_for_write_to_us textarea{
  64.     width: 880px; 
  65.     height: 150px;
  66. }
  67.  
  68. </style>
  69. <div class="Clickme">ClickMe</div>
  70. <div id="contact-us-lightbox-panel">  
  71.     <div id="headerbar-lightbox-panel"></div>
  72.     <div class="close-panel"><a href="#">X</a></div>
  73.     <div id="contents_for_address">
  74.         <div id="left">
  75.  
  76.             <p>Call Us :</p>
  77.             <p>Office number :0000000</p>
  78.             <p>Toll Free : 0000000</p>
  79.         </div>
  80.         <div id="right">
  81.             <p>Address :</p>
  82.             <p>asdasdsadasd</p>
  83.             <p>dsadasdasdsadas</p>
  84.         </div>
  85.     </div>
  86.     <div id="contents_for_write_to_us">
  87.         <p>Write To Us(Characters 600 Limit)</p>
  88.         <textarea></textarea>
  89.     </div>
  90.     <button class="save-pop">Submit</button>
  91.     <button class="save-pop">Reset</button>
  92. </div>
  93. <div id="lightbox"></div>  
  94.  
  95. <script src="js/jquery.min.js"></script>
  96. <script type="text/javascript">
  97. $(document).ready(function(){
  98.   $(".Clickme").click(function(){
  99.     $("#lightbox, #contact-us-lightbox-panel").fadeIn(300); 
  100.   });
  101.    $(".close-panel").click(function(){  
  102.     $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  103.   });
  104.      $(".save-pop").click(function(){  
  105.     $("#lightbox, #contact-us-lightbox-panel").fadeOut(300);   
  106.   });
  107. });
  108.  
  109. </script>
  110. </body>
  111.  
  112. <html>
Make sure that you add the jquery script in the above mentioned code.Lemme know if you were expecting something like this
Aug 23 '13 #2

Sign in to post your reply or Sign up for a free account.

Similar topics

3
by: Bouzy | last post by:
I have been trying to put lightbox on my site I am making, but its not working. I have searched on forums and can't find exactly the same problem. When I click on my thumnail to open it abosolutly...
1
by: daniel | last post by:
Hello, I have limited understanding of js (css/html is more me) and when I run into complicated problems I am left undone. The person I normally call upon is on holiday so I was wondering if I...
2
by: mc | last post by:
I'm using VS.NET 2005 to create C# asp.net web applications. During deveopment and debugging 9using the "ASP.NET Development Server"), a number of .TMP files are created they have been for Class...
2
by: idioteque | last post by:
Hi everyone, I don't have a lot of experience in database management, but I'm trying to replicate a database that is currently being used on a live website. I'd like to replicate it so that our...
1
by: joker197cinque | last post by:
I'm a webmaster from 2000. Few days ago a very strange project arrived in my hands. I have a photoshop layout that I am supposed to slice and mount into HTML+CSS. This is a very common task for...
8
by: vanald04 | last post by:
Alright, I racked my brain all last night and can't figure out what I'm doing wrong. I've copied: <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript"...
2
by: jrod11 | last post by:
I recently found a gallery (http://www.planet-source-code.com/vb/scripts/ShowCode.asp?txtCodeId=6727&lngWId=4). The image in the gallery when clicked on will open the larger image in the same...
3
KeredDrahcir
by: KeredDrahcir | last post by:
I've created a lightbox which appears when a user clicks on a link to edit some options. It works in Firefox and Safari but as usualy doesn't work in IE. I'm using version 9. In the head I've...
1
ilya Kraft
by: ilya Kraft | last post by:
Ok, I have a portfolio page on my website and i added lightbox to view pictures of it, everything works fine, but when i press "next" or "previous" buttons it doesn't load next image. ...
1
by: Wesley King | last post by:
I am trying to get a "slideshow" effect on my website. I have plenty of examples of it, but I cannot for the life of me find a tutorial on programming it. Examples would include: ...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.