Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <link rel="stylesheet" href="http://www.jacklmoore.com/colorbox/example3/colorbox.css" />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="http://www.jacklmoore.com/colorbox/jquery.colorbox.js"></script>
  
</head>
 <body>
        <div class="container">
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/1"><img src="http://lorempixel.com/400/200/sports/1" alt=""></a>
                <h3>Title1</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <div class="galleryItem">
                <a class="group3" href="http://upload.wikimedia.org/wikipedia/commons/3/38/Arduino_Uno_-_R3.jpg" title="Arduino Uno."> <img src="http://upload.wikimedia.org/wikipedia/commons/3/38/Arduino_Uno_-_R3.jpg" alt=""></a>
                <h3>Arduino Uno</h3>
                <p>Arduino es una plataforma de hardware libre, basada en una placa con un microcontrolador y un entorno de desarrollo, diseñada para facilitar el uso de la electrónica en proyectos multidisciplinares</p>
            </div> 
​
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/2"><img src="http://lorempixel.com/400/200/sports/2" alt=""></a>
                <h3>Title3</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            
            <div class="galleryItem">
                <a class="group3" href="https://learn.adafruit.com/system/guides/images/000/000/309/medium310/overview.jpg"><img src="https://learn.adafruit.com/system/guides/images/000/000/309/medium310/overview.jpg?1396718934" alt=""></a>
                <h3>Blinking an LED with BeagleBone Black</h3>
                <p>Make an LED Blink using Python on a BeagleBone Black
In this tutorial, you will learn how to control an external LED using a BeagleBone Black (BBB) from Python.</p>
            </div>
​
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/6" ><img src="http://lorempixel.com/400/200/sports/6" alt=""></a>
                <h3>Title6</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/7"><img src="http://lorempixel.com/400/200/sports/7" alt=""></a>
                <h3>Title7</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/8"><img src="http://lorempixel.com/400/200/sports/8" alt=""></a>
                <h3>Title8</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
          
          <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/6" ><img src="http://lorempixel.com/400/200/sports/6" alt=""></a>
                <h3>Title6</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/7"><img src="http://lorempixel.com/400/200/sports/7" alt=""></a>
                <h3>Title7</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
            
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/8"><img src="http://lorempixel.com/400/200/sports/8" alt=""></a>
                <h3>Title8</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
         
            <div class="galleryItem">
                <a class="group3" href="http://lorempixel.com/400/200/sports/8"><img src="http://lorempixel.com/400/200/sports/8" alt=""></a>
                <h3>Title8</h3>
                <p>Lorem ipsum dolor sit amet...</p>
            </div>
          
        </div>
    </body>
  
  
</html>
 
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : Apr 24, 2014, 10:44:41 AM
    Author     : dturcios
*/
.container {
    width: 80%;
    margin: 30px auto;
    overflow: hidden;
    
}
.galleryItem {
    color: #797478;
    font: 10px/1.5 Verdana, Helvetica, sans-serif;
    float: left;
    max-height: 500px;
    width: 16%;
    margin:  2% 2% 50px 2%; 
    border: 1px dotted red;
}
 
.galleryItem h3 {
    text-transform: uppercase;
}
 
.galleryItem img {
    max-width: 100%;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    
}
​
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}
​
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}
​
/* MEDIA QUERIES*/
@media only screen and (max-width : 940px),
only screen and (max-device-width : 940px){
    .galleryItem {width: 21%;}
}
 
@media only screen and (max-width : 720px),
only screen and (max-device-width : 720px){
    .galleryItem {width: 29.33333%;}
}
 
@media only screen and (max-width : 530px),
only screen and (max-device-width : 530px){
    .galleryItem {width: 46%;}
}
 
@media only screen and (max-width : 320px),
only screen and (max-device-width : 320px){
    .galleryItem {width: 96%;}
    .galleryItem img {width: 96%;}
    .galleryItem h3 {font-size: 18px;}
    .galleryItem p {font-size: 18px;}
}
 
​
            $(document).ready(function(){
                //Examples of how to assign the Colorbox event to elements
                
                $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"});
                
            });
​
Output 300px

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
DiegoTcpro
0viewers