6 Replies Latest reply: Jul 22, 2013 4:22 PM by Nancy O. RSS

    Force horizontal row using fancybox

    MS1971 Community Member

      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.css" rel="stylesheet" media="screen">

      <script src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.pack.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.

        • 1. Re: Force horizontal row using fancybox
          Nancy O. CommunityMVP

          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.

          • 2. Re: Force horizontal row using fancybox
            MS1971 Community Member

            Hi Nancy,

             

            I really like this CSS grid layout and have incorporated it into my forsaletest page (See link below). I will also use it for a larger gallery at some point.

             

            There is alot off CSS in the page (more than I am used to at the moment!!).

             

            Basically I would like to have 6 product images contained in grids on the page but I would like to change it slightly;

             

            1. My descriptions contain more words and they need to fit and look good. I would like to test different float options (See product 1).

            2. Change the color of some of the text inline.

            3. Have enough space to see what Paypal buttons will look like underneath the descriptions but still in the grids (The code is currently commented out). Reduced size to fit if necessary.

            4. Maybe make the background a bit lighter and the text a bit darker.

             

            I have started to play around with the #thumbs p image container CSS to change width but have noticed the borders are fading a bit. Also when I first entered desriptions they appeared to the right hand side outside the grids.

             

            I was just wondering if you could advise on what CSS I should look at adjusting in this page.I do not want to make unnecessary changes to the code because I really like the look of it!.

             

            Kind Regards, Matt

             

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

            • 3. Re: Force horizontal row using fancybox
              Nancy O. CommunityMVP

              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.

              • 4. Re: Force horizontal row using fancybox
                MS1971 Community Member

                Hi Nancy,

                 

                Thankyou very much this is very helpful I will play around with it.

                 

                I am still struggling to insert the paypal buttons inside the grids at the bottom. If you look at Product 1A in the ForSaleTest page the image and descriptions look fine. When I attempt to insert the paypal button it appears outside the grid on the right hand side.

                 

                I was thinking wether I should be creating a separate #div for CSS which relates to the paypal buttons or maybe embedding some extra CSS in the webpage.

                 

                Any Ideas on the CSS required ?

                 

                Kind Regards, Matt.

                 

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

                • 5. Re: Force horizontal row using fancybox
                  MS1971 Community Member

                  Hi,

                   

                  I am still struggling with the best way to position the paypal button inside the grids in my test for sale page. There is so much information out there !!

                   

                  Any help greatly appreciated.

                   

                  Kind Regards, Matt.

                   

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

                  • 6. Re: Force horizontal row using fancybox
                    Nancy O. CommunityMVP

                    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.