Created
April 29, 2014 21:59
-
-
Save DiegoTc/11413059 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| 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: 10px auto; | |
| overflow: hidden; | |
| border: 1px dotted blue; | |
| } | |
| .galleryItem { | |
| color: #797478; | |
| font: 10px/1.5 Verdana, Helvetica, sans-serif; | |
| float: left; | |
| height: 300px; | |
| width: 400px; | |
| margin: 2% 2% 50px 2%; | |
| border: 1px dotted red; | |
| } | |
| .galleryItem h3 { | |
| text-transform: uppercase; | |
| } | |
| .galleryItem img { | |
| max-width: 50%; | |
| -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;} | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> | |
| </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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function(){ | |
| //Examples of how to assign the Colorbox event to elements | |
| $(".group3").colorbox({rel:'group3', transition:"none", width:"75%", height:"75%"}); | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment