SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to prevent two events from happening at the same time?

    Hey guys! I'm trying to make it so that when someone clicks on a picture, the picture shows up as a sort of pop-up thing in a new div and they can get out of it by clicking outside of the div. Here's my code so far:
    Code:
    $('document').ready(function () {
    
            $('.images-container a img').click(function(){
                var src = $(this).attr('src');
                var newdiv = $('<div class="pop-up"> <img src="' + src + '"</div>');
                $('body').addClass('opacity');
                $('body').append(newdiv);
            });
    
        $('body').click(function(){
            $('.lightbox').remove();
            $('body').removeClass('opacity');
        });
    });
    Could i get some advice please?

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    There are loads and loads of jQuery which do this sort of thing.
    Have you thought about using one of these: http://line25.com/articles/rounding-...ghtbox-scripts

    If for whatever reason you don't want to use a plugin, could you explain in a bit more detail what exactly your problem is.

  3. #3
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I want the new div to be removed and the bosy to go back to its originial opacity when they click off of it, but i cant seem to make it do that..

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    Hi,
    Shouldn't be too difficult.
    Could you post your HTML, or better still a link to a page where I can see what you've got so far.

  5. #5
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the code for the pictures
    Code:
    <div class="section">
                                <h2 class="section-header"><a href="#">Websites</a></h2>
                                <div class="images-container">
                                    <div>
                                        <a href="#">
                                            <img src="images/portfolio/website1.png">
                                            <hr>
                                            <p>title</p>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#">
                                            <img src="images/portfolio/website2.png">
                                            <hr>
                                            <p>title</p>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#">
                                            <img src="images/portfolio/website3.png">
                                            <hr>
                                            <p>title</p>
                                        </a>
                                    </div>
                                    <div>
                                        <a href="#">
                                            <img src="images/portfolio/website4.png">
                                            <hr>
                                            <p>title</p>
                                        </a>
                                    </div>
                                </div>
    
                            </div>

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,938
    Mentioned
    214 Post(s)
    Tagged
    12 Thread(s)
    What you're doing won't work, I'm afraid, as you attach onclick handlers to all of the images, but also to your document's body element.
    That means, that as soon as you click an image, the opacity class will be added to the body, by the first onclick handler, then it will be immediately removed by the second one.

    A more rational approach would be to create a <div> element to be your opacity layer.
    When a user then clicks on a link, you can display this div and blend in the image on top of it.
    You can attach an onclick handler to the opacity div, so that it hides itself and the image being displayed when the user clicks on it.

    I've made a demo for you to play around with here: http://hibbard.eu/blog/pages/lightbox-demo/
    You can exit the lightbox by clicking anywhere that's not the image.

    Here's the code:

    HTML Code:
    <!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>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Lightbox demo</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #black_overlay{
            display: block;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: black;
            z-index:1001;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);
          }
          
          #image {
            position:relative;;
            border: 16px solid white;
            z-index:1002;
          }
        </style>
      </head>
      
      <body>
        <div id="lightbox">
          <a href="lolcat.jpg">Display image in lightbox</a>
        </div>
    
        <script>
          jQuery.fn.center = function () {
            this.css("position","absolute");
            this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
            this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
            return this;
          }  
          
          $('document').ready(function () {
            $('#lightbox a').click(function(){
              $('<div>',{
                id : 'black_overlay',
                click: function(){
                  $(this).remove();
                  $('#image').remove();
                }
              }).insertBefore('#lightbox');
              
              $('<img>',{
                id: 'image',
                src: $(this).attr('href'),
                load: function() {
                  $(this).insertAfter('#lightbox').center();
                }
              })
              
              return false;
            });
          });
        </script>
      </body>
    </html>
    I cannot take credit for the centre function. I found it here: http://www.queness.com/code-snippet/...n-using-jquery
    Also, I found this post useful: http://stackoverflow.com/questions/8...-to-open-a-div

  7. #7
    SitePoint Enthusiast
    Join Date
    Jul 2012
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank You! I applied the concept you gave me and it worked!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •