Speed up development with full-stack environments for every branch.

Learn More

Add a lightbox effect for displaying photos on webpage [jQuery]

690 Runs 1628 Views 764 Copies
Saved

Saved

Tpojka 2

Tpojka
published 4 years ago

    <!doctype html>
    
    <html lang="en">
      
      <head>
    		
        <meta charset="utf-8" />
    		
        <title>jQuery lightBox plugin</title>
    		
        <!-- Load jQuery from Google's CDN -->
        <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
        
    		<!-- Start jQuery lightBox plugin js and css files -->
    		<script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script>
    		<link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" />
    		<!-- Finish jQuery lightBox plugin js and css files -->
        
        <!--[if IE]>
      	<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    		<![endif]-->
    		
    		<!-- Activation of jQuery lightBox plugin -->
    		<script type="text/javascript">
    			$(function() {
    				$('#gallery a').lightBox();
    			});
    		</script>
    		
        <style type="text/css">
    			/* jQuery lightBox plugin - Gallery style */
    			#gallery {
    				background-color: #444;
    				padding: 10px;
    				width: 520px;
    			}
    			#gallery ul { list-style: none; }
    			#gallery ul li { display: inline; }
    			#gallery ul img {
    				border: 5px solid #3e3e3e;
    				border-width: 5px 5px 20px;
    			}
    			#gallery ul a:hover img {
    				border: 5px solid #fff;
    				border-width: 5px 5px 20px;
    				color: #fff;
    			}
    			#gallery ul a:hover { color: #fff; }
    		</style>
    	
      </head>
    	
      <body>
      	
        <h2 id="example">Lightbox effect for displaying photos on webpage</h2>
    		
        <p>Click in the image and see the <strong>jQuery lightBox plugin</strong> in action.</p>
    		
        <div id="gallery">
    			<ul>
    				<li>
    					<a href="http://work.tpojka.com/runnable/43630265/photos/image1.jpg" title="Use the flexibility of jQuery selectors and create a group of images as desired. $('#gallery').lightBox();">
    						<img src="http://work.tpojka.com/runnable/43630265/photos/thumb_image1.jpg" width="72" height="72" alt="" />
    					</a>
    				</li>
    				<li>
    					<a href="http://work.tpojka.com/runnable/43630265/photos/image2.jpg" title="You can use left and right arrows to move through gallery.">
    						<img src="http://work.tpojka.com/runnable/43630265/photos/thumb_image2.jpg" width="72" height="72" alt="" />
    					</a>
    				</li>
    				<li>
    					<a href="http://work.tpojka.com/runnable/43630265/photos/image3.jpg" title="Also, you can use keys 'p' and 'n' for moving in gallery.">
    						<img src="http://work.tpojka.com/runnable/43630265/photos/thumb_image3.jpg" width="72" height="72" alt="" />
    					</a>
    				</li>
    				<li>
    					<a href="http://work.tpojka.com/runnable/43630265/photos/image4.jpg" title="Using key 'c' you can close image previewing.">
    						<img src="http://work.tpojka.com/runnable/43630265/photos/thumb_image4.jpg" width="72" height="72" alt="" />
    					</a>
    				</li>
    				<li>
    					<a href="http://work.tpojka.com/runnable/43630265/photos/image5.jpg" title="But possiblly best use of this title is to describe your image. It have SEO benefits too. ;)">
    						<img src="http://work.tpojka.com/runnable/43630265/photos/thumb_image5.jpg" width="72" height="72" alt="" />
    					</a>
    				</li>
    			</ul>
    		</div>
        
        <div>
          <cite>Hint: You can use some keys to move through gallery</cite>
        </div>
        
    	</body>
    </html>
    Please login/signup to get access to the terminal.

    Your session has timed out.

    Dismiss (the page may not function properly).