Jesús Moreno

prettyPhoto Example

A gallery that does more than images

Introduction

All examples and code modified from: http://www.no-margin-for-errors.com/projects/prettyphoto-jquery-lightbox-clone/

Lightbox is a common way to easily create an image gallery. Lightbox used to use two JavaScript libraries named Prototype and Scriptaculous. These are both good. HoweverjQuery seems to be the dominant library. Lightbox has recently switched to jQuery.

Even so it doesn't have some of the capabilities to show many different kinds of content (like video or whatever). I'm showing you how to do a similar thing with prettyPhoto which is also some JavaScript built on top of the jQuery library. Once you have the jQuery library installed in your site you will have a lot of other options to add other interactivity to your site. There are literally thousands of tutorials and extensions for jQuery.

Here's how it works (for more in-depth tutorial see the prettyPhoto web site)

Basic Concept

The basic idea is that you download some JavaScript, CSS and Image files and write your links with a specific syntax and add a bit of JavaScript to your page and then your gallery works. What it essentially does is hijack a link you write to a large image and instead of letting the browser go to the image it grabs the image and displays it on top of the current page with a partly see through grey background between the image and the page.

NOTE: you can use more than just images in the gallery. You can use it to show video, Flash or other sites. Read the documentation for more information.

Single Image

This is a simple example of what you would do for an image (once you've included all of the other files and script tags needed) to show it in prettyPhoto.


  <a href="images/theIMG.jpg" rel="prettyPhoto" title="title here" >  
      <img src="images/theIMG_tb.jpg" width="80" height="80" alt="Monkeys" />
  </a>

Image Gallery Tutorial

Download the files you will need. Go to this link and click on the Production Version Compressed link.
The file is a .zip file. Unzip it.
Copy the js, images and css folders to your site. If you already have js, images or css folders then just copy the contents of these folders to your existing folders.

Add the following to your HTML page inside the <head> element so that it uses the css and JavaScript files you just downloaded:

  <script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
  <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" title="prettyPhoto main stylesheet" charset="utf-8" />
  <script src="js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>

Instead of linking to a downloaded version of jQuery I would recommend linking to a CDN hosted version like below. The only thing to worry about is that a brand new version of jQuery might break the code. So test it. The version shown works.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript" type="text/javascript"></script>

Add this right before the closing body element on the page:

<script type="text/javascript" charset="utf-8">
               $(document).ready(function(){
                 $("a[rel^='prettyPhoto']").prettyPhoto();
               });
             </script>
             </body>

Image of the script tag for pretty photo

prettyPhoto shows links to twitter and facebook by default. If you don't want them to show up the add in an options object to the prettyPhoto line,like this instead of the line that starts:


  $("a[rel^='prettyPhoto']").prettyPhoto({social_tools:''});

Add your thumbnails to the page with normal HTML.
Make sure the link in the href attribute points to the large version of the image

Add a rel attribute to your <a> element with the following syntax rel="prettyPhoto[galleryName]"

Here's a photo:
picture of

Example:

<a rel="prettyPhoto[myGallery]" title="Cocoa Pod" href="large1.jpg">
      <img alt="picture of cocoa pod split open" src="thumb1.jpg" />
  </a>   
  
  <a rel="prettyPhoto[myGallery]" title="Man with a Parro" href="large2.jpg">
      <img alt="Man with a Parro" src="thumb2.jpg" />
  </a>
  
  <a rel="prettyPhoto[myGallery]" title="Red Umbrella" href="large2.jpg">
      <img alt="Red Umbrella" src="thumb2.jpg" />
  </a>

Notice that the rel attribute is exactly the same each time. It doesn't change

You of course would just link to your own images. Remember that there are two images used. One is the thumbnail which is included with the img elment. If the user doesn't have Javascript then the big image will just show in a new page by itself.

Example Gallery

That’s all folks. Hopefully your gallery will be working shortly.

Fuente: http://www.teachingmultimedia.com/mmp240/prettyPhoto/#prettyPhoto

Fuente: http://cybmeta.com/formas-basicas-con-css-triangulos-circulos-trapecios-rectangulos-cuadrados/

Formas básicas con CSS: triángulos, círculos, trapecios, rectángulos, cuadrados … CSS

Estoy desarrollando mi primer tema comercial para WordPress y en el diseño se utilizan algunasformas geométricas básicas como elementos decorativos. Podría haberlos insertado mediante imágenes o mediante iconos vectoriales pero he decidido crearloos con CSS. La razón: mismo resultado, mayor rapidez.

En este post he recopilado los snippets CSS para crear formas básicas como cuadrados, círculos y triángulos. Derivadas de estas se pueden construir fácilmente otras formas tales como rombos, trapecios y otros paralelogramos. Espero que te sean útiles.

Cuadrados y rectángulos

Los cuadrados y los rectángulos son las formas geométricas más fáciles de dibujar con CSS. Basta definir un bloque con la altura y anchura del cuadrado o rectángulo y darle un color de fondo o definirle un borde. Por ejemplo:

.cuadrado {
     width: 100px; 
     height: 100px; 
     background: #428bca;
}

Si en lugar de un color de fondo definimos un borde:

.cuadrado-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
}

Y se puede combinar border y background:

.cuadrado-3 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

Y tan fácil como cambiar las propiedades CSS width y height para obtener un rectángulo:

.rectangulo {
     width: 250px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

El rombo

Si giramos el cuadrado obtendremos una forma de rombo. El giro se consigue gracias a la propiedad transform y la función rotate:

.rombo {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}

La forma anterior no es realmente un rombo, es tan sólo un cuadrado girado. El verdadero rombo se consigue combinando la función rotate y skew en la propiedad transform:

.rombo-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg) skew(15deg, 15deg);
     -moz-transform: rotate(45deg) skew(15deg, 15deg);
     -ms-transform: rotate(45deg) skew(15deg, 15deg);
     -o-transform: rotate(45deg) skew(15deg, 15deg);
     transform: rotate(45deg) skew(15deg, 15deg);
}

Paralelogramos

Con la propiedad transform podemos conseguir otros paralelogramos. Por ejemplo:

.paralelogramo {
     width: 150px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
     -ms-transform: skew(20deg);
     -o-transform: skew(20deg);
     transform: skew(20deg);
}

Trapecios

.trapecio {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;
}

.trapecio-top {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-top: 100px solid #428bca;
}

Triángulos

En CSS podemos definir cada uno de los cuatro bordes de un bloque de forma diferente. Se puede aprovechar esta característica para dibujar formas derivadas del cuadrado, como el triángulo: Por ejemplo, si definimos un borde de una determinada anchura y a los bordes adyacentes le damos la mitad de anchura y un color diferente, obtenemos una forma triangular si al propio contenedor le damos una anchura y altura de cero. Por ejemplo:

.triangulo {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; 
}

Jugando con cada uno de los bordes podemos “girar” el triángulo (este mismo concepto se puede utilizar en el resto de formas basadas en bordes que veremos a continuación):

.triangulo-2 {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; 
}

Y también podemos combinar colores:

.triangulo-tricolor {
     width: 0; 
     height: 0; 
     border-left: 100px solid #428bca;
     border-top: 50px solid #f0ad4e;
     border-bottom: 50px solid #d9534f; 
}

Triángulo equilátero

.triangulo-equilatero-bottom-left {
     width: 0;
     height: 0;
     border-right: 50px solid transparent;
     border-top: 50px solid transparent;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #f0ad4e;
}

.triangulo-equilatero-bottom {
     width: 0;
     height: 0;
     border-right: 100px solid transparent;
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-bottom: 100px solid #f0ad4e;
}

Círculos y formas redondeadas

Del cuadrado también podemos obtener el círculo y formas redondeadas si aplicamos la propiedad border-radius. Un border-radius igual del 50% en los cuatro bordes del cuadrado dará el círculo:

.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Oval

Y si podemos tener un círculo, también podemos tener una forma ovalada:

.oval {
     width: 250px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Combinando distintos valores de border-radius para cada borde obtendremos formas redondeadas diferentes:

.oval-half-red {
     width: 250px;
     height: 100px;
     -moz-border-radius: 0 50% / 0 100%;
     -webkit-border-radius: 0 50% / 0 100%;
     border-radius: 0 50% / 0 100%;
     background: #5cb85c;
     border: 3px solid #555;
}

Huevo

.huevo {
    width: 126px;
    height: 180px;
    background-color: #5cb85c;
    -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

1/4 de círculo

.cuarto-circulo {
     width: 100px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100% 0 0;
     -webkit-border-radius: 0 100% 0 0;
     border-radius: 0 100% 0 0;
}

Semicírculo

.semi-circulo {
     width: 100px; 
     height: 50px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 100px 100px 0 0;
     -webkit-border-radius: 100px 100px 0 0;
     border-radius: 100px 100px 0 0;
}

.semi-circulo-2 {
     width: 50px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100px 100px 0;
     -webkit-border-radius: 0 100px 100px 0;
     border-radius: 0 100px 100px 0;
}

Pac-Man (ComeCocos)

.pac-man {
     width:0;
     height:0;
     border-right: 50px solid transparent;
     border-top: 50px solid #5cb85c;
     border-left: 50px solid #5cb85c;
     border-bottom: 50px solid #5cb85c;
     -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%;
}

Démosle color:

.color-chart {
     width:0;
     height:0;
     border-right: 50px solid #d9534f;
     border-top: 50px solid #428bca;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #5cb85c;
     -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%;
}

Y con el negativo de pac-man y unos ligeros ajustes en el grosor de los bordes tendremos un cono:

.cono {
    width: 0px;
    height: 0px;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;
    border-top: 100px solid #5cb85c;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Más formas

Ribbon

.ribbon {
    width: 0px;
    height: 120px;
    border-left: 50px solid #d9534f;
    border-right: 50px solid #d9534f;
    border-bottom: 35px solid transparent;
}

Luna

.luna {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 30px 10px 0 #d9534f;
    -webkit-box-shadow: 30px 10px 0 #d9534f;
    box-shadow: 30px 10px 0 #d9534f;
}

Todavía más

Las posibilidades para dibujar formas con CSS son prácticamente ilimitadas, mucho más si introducimos los pseudoelementos :before y :after. No voy a cubrir estas opciones en este post pues su objetivo era el de mostrar formas geométricas básicas pero si quieres profundizar más te recomiendo los siguientes enlaces: