4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

CSS Portfolio Help

by coykiesaol
3 replies
  • WEB DESIGN
    • |
I have made my own portfolio website, using CSS. It all looks nice, apart from I dont really know how to display the portfolio samples properly, via CSS. When I look at others, they have things such as when you click the thumbnail, it like opens up as a little pop-up, with a black border and a close button, get what i mean? How do I go about this? Does anyone have a link to an online tutorial on how to do this?

Thanks
#css #portfolio
  • Profile picture of the author phpbbxpert
    It is a JavaScript lightbox.
    There are a lot of options.
    This tends to be the one I favor Fancybox - Fancy lightbox alternative
    {{ DiscussionBoard.errors[3159338].message }}
  • Profile picture of the author RichardHK
    Yes, and another really good lightbox if you need to show movies, flash, and other such stuff is Colorbox.
    Signature

    Richard, Hong Kong
    Business Consulting

    {{ DiscussionBoard.errors[3159496].message }}
  • Profile picture of the author best web designer
    Hi,
    Use java script in your website
    How to Use:

    1. Include lightbox.js in your header. <script type="text/javascript" src="lightbox.js"></script>
    2. Add rel="lightbox" attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
      Optional: Use the title attribute if you want to show a caption.
    Customizing:

    1. You can use CSS to style the image container. Here is the code used in the examples above: #lightbox{
      background-color:#eee;
      padding: 10px;
      border-bottom: 2px solid #666;
      border-right: 2px solid #666;
      }
      #lightboxDetails{
      font-size: 0.8em;
      padding-top: 0.4em;
      }
      #lightboxCaption{ float: left; }
      #keyboardMsg{ float: right; }

      #lightbox img{ border: none; }
      #overlay img{ border: none; }
    2. To create the 'shadow' effect over the page, you'll need to use a PNG file and some extra CSS. The CSS is a bit messy thanks to IE's unorthodox support of PNG transparency: #overlay{ background-image: url(overlay.png); }

      * html #overlay{
      background-color: #000;
      back\ground-color: transparent;
      background-image: url(blank.gif);
      filter: progidXImageTransform.Microsoft.AlphaImageLoader (src="overlay.png", sizingMethod="scale");
      }
    3. If you would like to show the user a 'loading' graphic, like the animated progress bar in the examples above, specify its location at the top of the lightbox.js file. var loadingImage = 'loading.gif';
    4. In the same vein, if you would like to use a 'close button', like the 'X' graphic in the examples above, specify its location at the top of the lightbox.js file. var closeButton = 'close.gif';
    {{ DiscussionBoard.errors[3320669].message }}

Trending Topics