Skip navigation
Currently Being Moderated

Force horizontal row using fancybox

Jun 24, 2013 2:20 PM

Tags: #jquery #dreamweaver #javascript #code #layout #html5

Hi,

 

I am working on a test dreamweaver BC site. I have inserted the following links to CDN in my head tags and am currently testing enlarging thumbnail images using fancybox;

 

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<link href="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.c ss" rel="stylesheet" media="screen">

<script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.p ack.js"></script>

 

 

I am seeking advice on a couple more features;

 

1. I would like to create 3 rows of 2 images in my test forsale page and insert some neat narrative on the right hand side of each image and maybe enclose a border/box around each image with its description. (I have tried creating a div id for each image and testing some css and this works but was wondering if this is the best approach)

 

2. Also on a new gallery page I would like to create a horizontal scroll of up to 10 thumbnails which are enlarged when you click on them using fancybox.

 

I have inserted a link to the live test page;

 

http://craftime-bs6.businesscatalyst.com/forsale.html

 

Any advice much appreciated !

 

 

Kind Regards, Matt.

 
Replies
  • Currently Being Moderated
    Jun 24, 2013 3:10 PM   in reply to MS1971

    So you need a CSS Layout or grid, something like this:

    http://alt-web.com/TEMPLATES/CSS-Semi-liq-photo-sheet.shtml

     

    Instead of putting captions under images as I have, you could float descriptions on either side of images with CSS.

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 11, 2013 2:04 PM   in reply to MS1971

    You might try something like this:

     

    /**this styles image container*/

    #thumbs p {

    background:rgba(255,255,255,0.7);

    float:left;

    width: 360px;

    min-height: 12.5em;

    margin: 10px 0 0 20px;

    padding: 10px;

    border: 4px solid silver;

    /**rounded borders*/

    -moz-border-radius: 20px;

    -webkit-border-radius:20px;

    border-radius: 20px;

    /**this styles caption text*/

    font: italic 14px/1.5 Geneva, Arial, Helvetica, sans-serif;

    color: #666;

    text-align:right;

    /*display:inline-block;

    float:left*/

    }

     

    /**recommend using same size images*/

    #thumbs img {

    float:left;

    padding:16px;

    width:  120px; /**adjust width to photo*/

    height: 120px; /**adjust height to photo*/

    margin-bottom: 1.5em;

    opacity: 0.75;

      border:1px solid silver;

    /**CSS3 drop shadows*/

    -moz-box-shadow: 5px 5px 5px #666;

    -webkit-box-shadow: 5px 5px 5px #666;

    -khtml-box-shadow: 5px 5px 5px #666;

    box-shadow: 5px 5px 5px #666;

    }

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 22, 2013 4:22 PM   in reply to MS1971

    I think you'll need a different layout approach to manage those paypal buttons.

     

    Try this code inside a new, blank document.

     

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>HTML5 Document</title>
    
    <!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
    
    <style>
    * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }
    
    body {
    padding: 0;
    width: 980px;
    margin: 0 auto;
    background: #CFC;
    color: #366;
    font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
    font-size: 100%;
    }
    
    header {
    margin: 0;
    padding: 0;
    width: 100%;
    background: #366;
    }
    
    header h1, header h2 {
    display: inline;
    padding: 0 22px 0 22px;
    color: #CFC
    }
    
    section {
    margin: 0;
    padding: 0;
    background: #FFF;
    overflow: hidden; /**float containment**/
    }
    
    article {
    clear: left;
    display: block;
    margin: 0;
    padding: 0 12px
    }
    
    aside {
    margin: 12px 0;
    padding: 0 6px;
    width: 33.33%;  /**3 equal width columns**/
    float: left;
    min-height: 245px;
    border-top: 8px solid #CCC;
    border-bottom: 8px solid #CCC;
    border-radius: 20px;
    }
    
    aside img {
    float: left;
    border: 1px solid #CCC;
    box-shadow: 2px 2px 3px #333;
    }
    
    aside p {
    text-align: right;
    margin: 0;
    margin-left: 115px;
    padding: 0 12px;
    font-size: 14px;
    }
    
    .paypal { margin-left: 190px }
    
    footer {
    clear: both;
    background: #366;
    color: #FFF;
    text-align: center;
    margin: 0;
    padding: 15px;
    }
    </style>
    </head>
    
    <body>
    
    <!--begin header-->
    <header>
    <h1>Sitename | </h1>
    <h2>Some pithy slogan...</h2>
    </header>
    
    <section>
    
    <article>
    <h3>Article</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. 
    Vestibulum luctus mauris sed sem dapibus luctus. </p>
    </article>
    
    <!--begin 3 columns-->
    <aside>
    <h3>Left Aside</h3>
    <img src="image1.jpg" alt="image 1" height="125" width="125">
     <!--paypal button-->
    <form class="paypal" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="UHZWKYRXS2ZLE">
    <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
    </form>
    <!--end paypal-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. </p>
    </aside>
    
    <aside>
    <h3>Middle Aside</h3>
    <img src="image1.jpg" alt="image 2" height="125" width="125">
     <!--paypal button-->
    <form class="paypal" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="UHZWKYRXS2ZLE">
    <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
    </form>
    <!--end paypal-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. </p>
    </aside>
    
    <aside>
    <h3>Right Aside</h3>
    <img src="image1.jpg" alt="image 3" height="125" width="125">
     <!--paypal button-->
    <form class="paypal" target="paypal" action="https://www.paypal.com/cgi-bin/webscr" method="post">
    <input type="hidden" name="cmd" value="_s-xclick">
    <input type="hidden" name="hosted_button_id" value="UHZWKYRXS2ZLE">
    <input type="image" src="https://www.paypalobjects.com/en_GB/i/btn/btn_cart_SM.gif" border="0" name="submit" alt="PayPal – The safer, easier way to pay online.">
    <img alt="" border="0" src="https://www.paypalobjects.com/en_GB/i/scr/pixel.gif" width="1" height="1">
    </form>
    <!--end paypal-->
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae libero lacus, vel hendrerit nisi! 
    Maecenas quis velit nisl, volutpat viverra felis. </p>
    </aside>
    
    <!--begin footer-->
    <footer> <small>© 2013 Your Site Name. All rights reserved</small> </footer>
    </section>
    </body>
    </html>

     

    This is what it looks like in Firefox:

    HTML5-3Asides.jpg

     

     

    Nancy O.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

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