Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jul 2013
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    CSS caption help AND navigation help.

    Hi so I wanted to make a lightbox plugin jquery WITHOUT javascript. I took the easy way and just followed a tutorial online with pure CSS.

    Here's my index.html

    http://imvusnapscene.webs.com/jquery/index.html

    cool right? So I got the lightbox down. But I wanted to add a caption on the bottom so when users click on the thumbnail not only will they be able to see but they will also see a caption on the bottom. For example this demo.

    On the website click on the box 2nd row last picture

    ------

    My 2nd question. How would I be able to make my creation into a gallery so when the user clicks on either picture It has a button on the side of the picture where they can navigate to the previous or next picture? Is there a way to do this using CSS? I dont like javascript.

  • #2
    Senior Coder
    Join Date
    Sep 2010
    Posts
    1,899
    Thanks
    15
    Thanked 226 Times in 226 Posts
    Here's my Zee Box code, written in response to the ever popular lightbox.
    Code:
    <!DOCTYPE html>
    <head>    
    <meta http-equiv="content-type" 
    		content="text/html;charset=utf-8">
    <title>Zee Box</title>
    
    <style type="text/css">
    body{width:800px;margin-right:auto;margin-left:auto;margin-top:100px;background-color:#333}
    #container{width:800px;height:600px;position:relative;border:2px solid red;}
    #inner{width:400px;height:400px;top:96px;left:178px;padding:20px;position:absolute;margin:0px;background-color:#ccf;border:2px solid blue}
    img{margin:0px}
    #showimg0{margin:0px;height:100px;left:0px;top:0px;position:absolute;z-index:6}
    #showimg0:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg1{margin:0px;height:100px;left:0px;top:100px;position:absolute;z-index:7}
    #showimg1:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg2{margin:0px;height:100px;left:0px;top:200px;position:absolute;z-index:8}
    #showimg2:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg3{margin:0px;height:100px;left:0px;top:300px;position:absolute;z-index:9}
    #showimg3:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg4{margin:0px;height:100px;left:0px;top:400px;position:absolute;z-index:10}
    #showimg4:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg5{margin:0px;height:100px;left:0px;top:500px;position:absolute;z-index:11}
    #showimg5:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg6{margin:0px;height:100px;right:0px;top:0px;position:absolute;z-index:12}
    #showimg6:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg7{margin:0px;height:100px;right:0px;top:100px;position:absolute;z-index:13}
    #showimg7:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg8{margin:0px;height:100px;right:0px;top:200px;position:absolute;z-index:14}
    #showimg8:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg9{margin:0px;height:100px;right:0px;top:300px;position:absolute;z-index:15}
    #showimg9:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg10{margin:0px;height:100px;right:0px;top:400px;position:absolute;z-index:16}
    #showimg10:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    #showimg11{margin:0px;height:100px;right:0px;top:500px;position:absolute;z-index:17}
    #showimg11:hover{top:0px;left:0px;width:100%;height:100%;z-index:100;position:absolute}
    </style></head><body onload="javascript:document.getElementById('container').setAttribute('style','display:block');">
    <div id="container" style="display: none;">
    
    <img id="showimg0" src="picture-100">
    
    <img id="showimg1" src="picture-101">
    
    <img id="showimg2" src="picture-102">
    
    <img id="showimg3" src="picture-103">
    
    <img id="showimg4" src="picture-104">
    
    <img id="showimg5" src="picture-105">
    
    <div id="inner"><h4>Hello</h4>Chile has become the first country in the world to approve, by 100 votes in favor and one abstention, a law guaranteeing net neutrality (Google translation; Spanish original). The law states [submitter's translation]: No [ISP] can block, interfere with, discriminate, hinder, nor restrict the right of any Internet user of using, send, receive or offer any content, application, or legitimate service through the Internet, as well as any activity or legitimate use conducted through the Internet.</div>
    
    <img id="showimg6" src="picture-106">
    
    <img id="showimg7" src="picture-107">
    
    <img id="showimg8" src="picture-108">
    
    <img id="showimg9" src="picture-109">
    
    <img id="showimg10" src="picture-110">
    
    <img id="showimg11" src="picture-111">
    
    </div>
    </body></html>
    So named because it depends on the z-index attribute, not for the rock band. You need to have twelve or so images with the proper file names and aspect ratio. It uses no JS, is very fast, uses the full sized images as thumbs. It's suited for similar tasks as lightbox. Built so you can just drop in a page and not wory about it interfering with other stuff on the page. I also wrote a JS version which will probably work on a wider range of browsers and is similarly fast.
    Last edited by DrDOS; 07-03-2013 at 02:55 AM.
    Welcome to http://www.myphotowizard.net

    where you can edit images, make a photo calendar, add text to images, and do much more.


    When you know what you're doing it's called Engineering, when you don't know, it's called Research and Development. And you can always charge more for Research and Development.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •