Oh no! Where's the JavaScript?
Your Web browser does not have JavaScript enabled or does not support JavaScript. Please enable JavaScript on your Web browser to properly view this Web site, or upgrade to a Web browser that does support JavaScript.
Sign In
Not a member yet? Click here to register.

How to create overlay

Ok so what I am curious about is this.

I have an image. What I want to be able to do is click on the image, and instead of opening a link in a new page, I want to make it have an image and the information pertaining to that image.

Something like when you click on an image in the downloads section, it brings up an overlay image.

How do i do this.
OK so add this in your file....

CodeDownload  
add_to_head("<link rel='stylesheet' href='".INCLUDES."jquery/colorbox/colorbox.css' type='text/css' media='screen' />");
   add_to_head("<script type='text/javascript' src='".INCLUDES."jquery/colorbox/jquery.colorbox.js'></script>");
   add_to_head("<script type='text/javascript'>\n
   /* <![CDATA[ */\n
   jQuery(document).ready(function(){
   jQuery('a.large').colorbox({
   width:'95%', height:'95%'
   });
   });\n
   /* ]]>*/\n
   </script>\n");

            echo"<a class='large' href='http://www.yoursite.com/large_image.png'><img src='http://www.yoursite.com/small_image.png' style='float: left;margin:3px;' alt='your image' /></a>";



That will open a big image in colorbox when you click on the small image.



OK I'll break it down for you...


So for the large image, that go's on the href attribute...

CodeDownload  
<a class='large' href='http://www.yoursite.com/large_image.png'> 



And for the small image that go's on the src attribute...

CodeDownload  
<img src='http://www.yoursite.com/small_image.png' style='float: left;margin:3px;' alt='your image' />



If you just want a Text link to click instead of a small image just change the small image part...

CodeDownload  
<img src='http://www.yoursite.com/small_image.png' style='float: left;margin:3px;' alt='your image' />



To Text

CodeDownload  
TEXT



Looks like this...

CodeDownload  
echo"<a class='large' href='http://www.yoursite.com/large_image.png'>TEXT</a>";



Every where we call the large class it will work.

Hope that helps.
Ok, but what I am looking at is doing something like this.



CodeDownload  
<table width='657' cellspacing='5'>
  <tr>
    <td colspan='3'><div align='center'><strong><u>RAND CLP<span class='small2'>TM</span> - Firearm Maintenance</u></strong> </div></td>
  </tr>
  <tr>
    <td width='71'><div align='center'><img src='http://letacticalsolutions.com/images/6_24VtacCLP_2oz100_medium.jpg' width='60' height='240' /></div></td>
    <td width='468'><div align='justify'>RAND CLP<span class='small2'>TM</span> is the best eco-friendly All-In-One: Cleaner, Lubricant and Protectant. RAND CLP<span class='small2'>TM</span> enhances firearm performance and reliability using a rare vegetable oil base and a proprietary blend of nanoparticles to create a uniquely smooth and durable surface.  RAND CLP<span class='small2'>TM</span> is non toxic, odorless, safe on all metals, polymers and woods and provides faster & easier cleaning after the initial pretreatment. </div>
      <p align='justify'><strong>RAND CLP<span class='small2'>TM</span> helps with:</strong></p>

<div>
  <div align='justify'>• Carbon build-up/fouling removal</div>
</div>
<div>
  <div align='justify'>• Rust prevention</div>
</div>
<div>
  <div align='justify'>• Jamming/malfunctions</div>
</div>
<div>
  <div align='justify'>• Water displacement</div>
</div>
<div>
  <div align='justify'>• Dirt, lint, dust - does not attach to the metal</div>
</div>
<div>
  <div align='justify'>• More functional, accurate, durable firearm</div>
</div>
<div>
  <div align='justify'>• Smoother slide, action and trigger pull</div>
</div>

<p align='justify'>The state of the art nanotechnology used allows for the nano-particles to work their way into the metal in your firearm and form a protective shield against rust, carbon and dirt. The vegetable oil acts as a scavenger, “lifting” the carbon/fouling from the metal, allowing it to be wiped away easily during cleaning.</p>

<p align='justify'>RAND CLP<span class='small2'>TM</span> is available in 2 and 4 ounce bottles, single use Rip & Drip packs, and 1 gallon sizes</p>
</td>
</tr>
</table>

Not sure, maybe you need to add text to title attribute or something. Please check the colorbox site for support using that in other ways.

http://www.jacklmoore.com/colorbox/
Ok so let's say i do this:

CodeDownload  
add_to_head("<link rel='stylesheet' href='".INCLUDES."jquery/colorbox/colorbox.css' type='text/css' media='screen' />");
   add_to_head("<script type='text/javascript' src='".INCLUDES."jquery/colorbox/jquery.colorbox.js'></script>");
   add_to_head("<script type='text/javascript'>\n
   /* <![CDATA[ */\n
   jQuery(document).ready(function(){
   jQuery('a.large').colorbox({
   width:'95%', height:'95%'
   });
   });\n
   /* ]]>*/\n
   </script>\n");

            echo"<a class='large' href='http://letacticalsolutions.com/images/6_24VtacCLP_2oz100_medium.jpg' width='60' height='240' /><img src='http://letacticalsolutions.com/images/6_24VtacCLP_2oz100_medium.jpg' width='30' height='120' style='float: left;margin:3px;' alt='your image' /></a>";



How do I make the box close. Right now it stays open, and next to the small picture i have this.

add_to_head(""); add_to_head(""); add_to_head("\n"); echo"your image";
Works for me fine and there is an X inside the box bottom right to close it or just click anywhere outside the box it will close it.

EDIT: If your testing it in a custom page remember to use <?php ?> tags. :D
how would i go about using this:

Property: html Default: false


Description: For displaying a string of HTML or text: $.colorbox({html:"<p>Hello</p>"});

Merged on Feb 16 2014 at 22:54:14:
Is there a way to give the box a background, instead of being just white.

Quote

Vyper69 wrote:

how would i go about using this:

Property: html Default: false

Description: For displaying a string of HTML or text: $.colorbox({html:"<p>Hello</p>"});


We do this then...

CodeDownload  

 jQuery('a.large').colorbox({
   width:'95%', height:'95%', html:'<p>Welcome</p>'
   });



Where you see <p>Welcome</p> this is where your string go's.

Here the full code...

CodeDownload  
<?php
add_to_head("<link rel='stylesheet' href='".INCLUDES."jquery/colorbox/colorbox.css' type='text/css' media='screen' />");
   add_to_head("<script type='text/javascript' src='".INCLUDES."jquery/colorbox/jquery.colorbox.js'></script>");
   add_to_head("<script type='text/javascript'>\n
   /* <![CDATA[ */\n
   jQuery(document).ready(function(){
   jQuery('a.large').colorbox({
   width:'95%', height:'95%', html:'<p>Welcome</p>'
   });
   });\n
   /* ]]>*/\n
   </script>\n");

            echo"<a class='large' href='http://www.phpfusionmods.co.uk/images/php-fusion-mods-logo.png' style='float: left;margin:3px;' alt='your image' />Click ME</a>";

?>



Quote

Vyper69 wrote:
Merged on Feb 16 2014 at 22:54:14:
Is there a way to give the box a background, instead of being just white.


includes/jquery/colorbox/colorbox.css...

CodeDownload  
#cboxContent{background:#fff;}



Change that to what you want.
how would a semi-transparent background work. Like when I login, i get the login box in a semi-transparent overlay
In the Same file look for...

CodeDownload  
#cboxOverlay{background:#000;}



;)
also i found this overlay:
use
CodeDownload  
<div class="overlay"></div>



style:

CodeDownload  
.overlay {
    width:100%;
    min-height:100%;
    background-color: rgba(0,0,0,0.5);
    overflow:hidden;
    position:fixed;
    top:0;
   z-index: 10;/*must be bigger than other elements and lesser than popup box */
   display:none;/* hidden by default */
}

Thread Information
Author
Replies
11 posts
Views
4061 times
Last Post
Last updated on 6 years ago
You can view all discussion threads in this forum.
You cannot set up a bounty in this discussion thread.
You can start a new discussion thread in this forum.
You cannot reply in this discussion thread.
You cannot start on a poll in this forum.
You cannot upload attachments in this forum.
You can download attachments in this forum.
You cannot up or down-vote on the post in this discussion thread.
Users who participated in discussion: Craig, PolarFox, Vyper69