SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make images scale in photo gallery?

    Hello! I am trying to use this simple javascript/css gallery for my photography portfolio: (www.ilkkakarhu.com - under development, btw. gallery names are in finnish, but just click a random word....)

    - Original gallery source : http://www.websitecodetutorials.com/...oller-demo.php

    It is otherwise great and works fine, but - If I display large images and browse with a small screen like macbook air "11 or ipad, the gallery doesn't auto scale to the screen size. This kind of ruins the whole concept and just looks plainly bad.

    I am hoping that someone has a simple solution for this problem. I want the gallery to show images in their actual pixel size (666 px height), but in case of smaller screens or browser windows, they should scale to fit window. Also I am curious, if there is a way to load the images in bacground somehow, so that the gallery is usable immediately, now there is an irritating 2-3 sec "load time", before the gallery is usable. Also ruining the concept a bit.

    -If I don't get this to work fluently, I guess I must go back using simpleviewer, which has always proven good looking and fast loading..though this time it is not what I really want... I want a side scrolling gallery which can be used with mousewheel also.

    I have tried playing a lot with the styles etc. but I am too beginner for this stuff and I alway end up messing the whole layout somehow.

    p.s. I am displaying the gallery in an iFrame... could I somehow apply these auto-scale properties to the iframe (a simple solution) ??

    Thank you!

    here is the code:

    <!DOCTYPE HTML><html><head><meta charset="UTF-8">
    <title>Body Scroller Demo</title>
    <style type="text/css">
    * {
    margin:0;
    padding:0;
    }
    html, body {
    height:100%;
    }
    #scroll {
    float:left;
    margin-right:-999em;
    list-style:none;
    clear:both;
    padding:15px 0;
    }
    #scroll li {
    margin:0 15px;
    text-align:center;
    float:left;
    display:inline;
    position:relative;
    border:5px solid #333;
    }
    #scroll img {
    display:block;
    border:0;
    }
    #scroll a {
    text-decoration:none;
    cursor:default;
    }
    #scroll span {
    position:absolute;
    bottom:0;left:0;
    background:#333;
    color:#fff;
    padding:20px 0;
    width:100%;
    opacity:.5;
    -ms-filter:"alpha(opacity=50)";
    filter:alpha(opacity=50);
    }
    #scroll a:hover span, #scroll a:focus span, #scroll a:active span {
    opacity:.80;
    -ms-filter:"alpha(opacity=80)";
    filter:alpha(opacity=80);
    font-weight:bold;
    }
    #vert { /* vertically center photos */
    float:left;
    height:50%;
    width:100%;
    margin-top:-283px; /* img height (525px) + li borders (10px) + ul padding (30px) = 565px 2 = 283px */
    }
    #left-arrow {
    position:fixed;
    top:50%;left:15px;
    height:60px;width:60px;
    margin-top:-30px;
    background:url(../images/left-arrow.png);
    outline:0;
    }
    #right-arrow {
    position:fixed;
    top:50%;right:15px;
    height:60px;width:60px;
    margin-top:-30px;
    background:url(../images/right-arrow.png);
    outline:0;
    }
    </style>
    <!--[if IE 6]>
    <style type="text/css">
    #scroll{padding-right:999em;}
    #scroll span{bottom:-1px;}
    </style>
    <![endif]-->
    </head>
    <body>
    <h1 style="position:absolute;">Body Scroller Demo</h1>
    <p id="breadcrumb">
    <a href="/">home</a> &raquo; <a href="/code/">code</a> &raquo; <a href="/code/photo-galleries/">photo galleries</a> &raquo; css body scroller demo</p><div id="vert"></div>
    <ul id="scroll">
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    <li><a href="#"><img src="../images/dunes.jpg" alt=""><span>Image Name</span></a></li>
    </ul>

    <script type="text/javascript" src="css-body-scroller.js"></script>

    </body>
    </html>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Hi karhu. Welcome to the forums.

    The main problem here (apart from this being a rather obtrusive script) is that the right had button on your page doesn't stay in view on a smaller screen. I think this is a combination of the gallery being served up inside and iframe and/or the use of tables to lay out the page. Why are you using an iframe here? I would also rethink the use of tables for layout. They are way out of date now.

  3. #3
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, I am slowly trying to update my html skills from the 1990's

    At first I made the page layout using oldskool frameset, which I thought was fine. Then I read that framesets are outdated and should be avoided, so I tried using a table based layout....

    For some reason (bad coding skills), the layout went really funny and didn't work in my table-style approach - I just couldn't center and align contents coherently - until I tried displaying the picture galleries in a table cell inside an iframe and it worked...so I kept on using this layout (iframes in table cells), as it proved a working solution. This also helps my organization, as each photo gallery is a simple .html page which I can separately edit,
    and display in chosen iframes... does this make sense !?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by karhu View Post
    does this make sense !?
    It makes sense in as much as I can understand what you are saying ... but it doesn't make sense to build a web page like that.

    We can help talk you through the layout of this page with more modern techniques, if you like. But I would also be looking at a different kind of layout, anyhow, and a different kind of gallery. I'm not keen on sideways scrolling galleries, especially if they rely on hovering. There are lots of really nice gallery scripts out there that are nicer to use than this.

    So, a lot of decisions to make, but this is a good place to learn.

  5. #5
    SitePoint Member
    Join Date
    Feb 2013
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok!

    Please tell me about these more modern layout techniques...? I want to know? Using some DIV tags or what? Tell me!

    - I am looking at other kinds of gallery scripts (tip me if you know of good ones), but to be honest, the scripts out there don't convince me. They are too complicated, too many hovering buttons,
    animations, thumbnail-options etc. I just want simple minimalist sidescrolling gallery that shows my pictures intuitively and fast. Of course the simple approach is to use basic vertical scrolling gallery, but I like the idea of horizontal, it reminds me of browsing through a magazine etc.
    In my ideal gallery, The user shouldn't have to concentrate on which button to press, but instead the pictures should be easily accessible "in your face"...immediately rolling to the retina after opening the page. (-check out my inspiration . http://www.cameronrad.com/works)

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,592
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can do this sort of thing without JS at all if you like. If you turn off JS on the Cameron Rad site, the gallery works quite nicely. But users have to scroll to the right, which some may not like.

    Here are some other galleries that might be worth a look:

    http://www.runilavaolsen.com/index.p...usell&Itemid=3
    http://bxslider.com/examples/manual-...-infinite-loop
    http://www.photoswipe.com/
    http://www.woothemes.com/flexslider/

    With all of these examples, you can peek under the hood at the HTML, CSS and JS to see how they are built. (Just right click and choose Inspect Element in Chrome.)


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
  •