Skip navigation
Currently Being Moderated

Lightbox, open HERE!

Jan 30, 2013 11:01 PM

I always design according to my technical limitations.  Today, I decided to design according to how I'd like to see it and then figure out how to pull off the technical part.

 

I'm working on a small news page for a company, I want all the content to be on one page.  When the user clicks on the article he/she wants to read I imagined that something like a lightbox might pop up on the right side of the screen.

 

http://heyhector.com/crap/Web2.jpg

 

Lightbox

 

http://heyhector.com/crap/Web2.1.jpg

 

I want the light box to ALWAYS open in that specific area at that specific width.  Is there a way to do this or should I scrap this idea?

 
Replies
  • Currently Being Moderated
    Jan 31, 2013 12:35 AM   in reply to MagicToaster

    Yes, you can do that with jQuery. A simple example is below:

     

     

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Untitled Document</title>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

     

    $(document).ready(function(){

     

    $(".newsOne").hide();

    $(".newsOneTrigger").show();

     

    $('.newsOneTrigger').click(function(){

    $(".newsOne").slideToggle();

    });

     

    $(".newsTwo").hide();

    $(".newsTwoTrigger").show();

     

    $('.newsTwoTrigger').click(function(){

    $(".newsTwo").slideToggle();

    });

     

    $(".newsThree").hide();

    $(".newsThreeTrigger").show();

     

    $('.newsThreeTrigger').click(function(){

    $(".newsThree").slideToggle();

    });

     

     

    });

     

    </script>

    <style>

    .slidingDiv {

        height:300px;

        background-color: #99CCFF;

        padding:20px;

        margin-top:10px;

        border-bottom:5px solid #3399FF;

    }

     

    .show_hide {

        display:none;

    }</style>

    <style>

    #wrapper {

        width: 980px;

        margin: 0 auto;

        overflow: hidden;

        font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;

        font-size: 13px;

    }

    #colOne, #colTwo, #colThree {

        float: left;

        height: 500px;

    }

    #colOne p, #colTwo p, #colThree p {

        margin: 0;

        padding: 5px 15px;

        line-height: 20px;

    }

    #colOne h3, #colTwo h3, #colThree h3 {

        margin: 0;

        padding: 15px 15px 0 15px;

        line-height: 20px;

    }

    #colOne {

        width: 250px;

        background-color:#CCC;

    }

    #colTwo {

        width: 250px;

        background-color:#999;

        margin-left: 2px;

    }

    #colThree {

        width: 478px;

        background-color:#333;

        color: #fff;

        position: relative;

    }

    .newsOne, .newsTwo, .newsThree {

        width: 478px;

        height: 500px;

        position: absolute;

        top: 0;

        left: 0;

        background-color:#FF9;

        color: #333;

    }

    </style>

    </head>

     

    <body>

    <div id="wrapper">

    <div id="colOne">

    <h3>News Article 1</h3>

    <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsOneTrigger">Read More</a></p>

     

    </div><!-- end colOne -->

     

    <div id="colTwo">

    <h3>News Article 2</h3>

    <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsTwoTrigger">Read More</a></p>

    <h3>News Article 3</h3>

    <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. <a href="#" class="newsThreeTrigger">Read More</a></p>

    </div><!-- end coltwo -->

    <div id="colThree">

    <div class="newsOne">

     

    <p>News 1 article goes here <a href="#" class="newsOneTrigger">Close me</a></p>

    </div>

    <!-- end newsOne -->

    <div class="newsTwo">

     

    <p>News 2 article goes here <a href="#" class="newsTwoTrigger">Close me</a></p>

    </div>

    <!-- end newsTwo -->

    <div class="newsThree">

     

    <p>News 3 article goes here <a href="#" class="newsThreeTrigger">Close me</a></p>

    </div>

    <!-- end newsTwo -->

    <h3 style="color: #fff;">About Us</h3>

    <p>Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here. Some text goes here.</p>

     

    </div><!-- end colThree -->

     

     

    </div><!-- end wrapper -->

     

    </body>

    </html>

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 6:49 AM   in reply to MagicToaster

    MagicToaster wrote:

     

    osgood!

     

    This is fantastic! I can't believe you went through all that trouble!

     

    I'm sorry to reply so late, the email notification went to my spam folder.

     

    Again, thank you!!!

     

    No problem, I'm learning new stuff myself on the way so it's beneficial to me as well. Might use it myself at some point in the future.

     
    |
    Mark as:
  • Currently Being Moderated
    Feb 6, 2013 7:18 AM   in reply to MagicToaster

    You can call another page into the slider by using an 'include' file (php example below)

     

    <div class="newsThree">

     

    <?php include('newsThree.php'); ?>

     

    </div>

     

     

    That will get the page called newsThree.php and insert it into the associated slider.

     

    I have no idea what happens if the content on the page is longer than the content on the master page. It's something that you need to consider before going down this root. 

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points