Where Is Gordon In Emerald

Drupal + jQuery: photo gallery style 'filmstrip'

The site Voilà the Bijou, which exhibits the works of jewelry Donella Menichini, I developed a Drupal 6 simple theme exhibition based on the colors of the logo (created by Mauro Luccarini of Riuniti Brains), which focuses all attention on the gem.

with Donella Having decided to divide the jewel in collections (with names that recall the world of opera and theater), I decided to create a separate page for each collection with its photo gallery, made in such a way as to have exposed a single gem at a time, but with a glance at the whole collection.

Basically, I wanted to have a big picture of the jewelry selected in the foreground, under a filmstrip of thumbnails.

Without go to find modules dedicated to photo galleries, I created this simple display it based primarily on Views and ImageCache.

1. Necessary forms

1. Views 2 (to create pages with the gallery)
2. Views Custom Field (to generate the ad hoc markup)
3. ImageCache (to create the images to be displayed)

2. Preliminary Organization

The most rational way to organize content into collections and make the Taxonomy , creating a vocabulary "Collections" and adding all the collections of such terms.

Each node is a gem, and only belongs to a collection. May have one or more images attached, but only the former is necessary for the exposure, and this is what we will consider (the others are only visible on the page dedicated to the jewelry).

should implement two ImageCache presets, one for the thumbnails, and one for the big picture.

The first is called preset collezioni_thumb , and action Scale And Crop to 80x80, because I want square thumbnails, created from photos of the jewelry.

The second name is called preset collezioni_full , and action to 400x100 Scale%, because I want images 400px wide (the photos are all in 3:2 aspect ratio).

3. Build this page in Views

Since the collections are terms of a vocabulary of taxonomy, the page you will create in Views will be the default view page taxonomy / term .

To build it, you can start from the view that is created with the installation Views of and making use of arguments in order to generalize the pages for each taxonomy term.

L ' Topic necessary to pass from view is the taxonomy term ID (TID).

In then Page Setup, Path must be set to taxonomy / term /% where the '%' is a placeholder for the TID that is passed from the URL (this is independent created by Pathauto URL, and it works the same).

Basic Settings: The page title is good that this is set to 1% , which in this case indicates the value of TID (and hence is the name of the term, namely the collection, in our case).

Style The line must be fields, because we just need some data to be passed to jQuery to create the tunnel and its effects, and Style okay to be a HTML list ( in the style options, the fields to be grouped by Taxonomy: Term , and that's fine an unordered list - this can be set only after entering the corresponding field, see below).

Filters: enough that the node is published (in this case, the collections are the prerogative only of the gem, and there is no danger that we go to finish a page or other content - otherwise it would be advisable to filter by type of content).

Sort by: Title node (given that the jewelry collections are numbered consecutively).

We come then to the fields necessary, one by one in their order:

• Taxonomy: Term. We just need to group the fields in the options of style. Excluded from the view , because it will already be displayed as a grouping field.
• Content: Photo. are small pictures of each gem, must have the following properties:
• Link this field to its node (jQuery we need because if it goes down, you could still navigate to the page of bijou)
• Group multiple values, show a value from 0 (as it must be shown only the first image of the node)
• Label: no
• Format: collezioni_thumb image (small image, width 80px, which is on the thumbnail to click to see the big picture)
• Content: Photo. Another insertion of the same area mentioned above, because we need to include in the view of the same image twice: first as a thumbnail, the second (this) as the big picture. Here are the necessary properties:
• filter out (because we'll use jQuery Customfield and to view the image, where, when and how we think!)
• Group multiple values, show a value from 0
• Label: no
• Format: collezioni_full file path (the address of the image large width 400px, we will use as a benchmark for jQuery)
• Node: Title. The name de bijou that will be useful for further formatting of the tunnel. Excluded from view, to pass it to jQuery.
• Customfield: markup. In itself, the field is used to insert the markup at will in the view. We use to pass data to jQuery, using a span tag created ad hoc. This field have to be the last list, in order to have all the data from the database through queries made with the fields that precede it. Here's how to format it:
• Rewrite the output of this field. This property provides the data fields above: Enter the title of the node path and the big picture in a span:
• Text: \u0026lt;span class = "img-link" title = "[ title] Views Custom Field and then the module) are not necessary, since the option "Rewrite the output of this field is available with each field, and then we could take advantage of the last of the above fields. But in this way the output is cleaner and separates content from additional functionality, allowing improved intelligibility of the whole. Then do you ...
• If we look at the page you created with this view, we will see only a list of thumbnails on the sending node.

4.

Creating gallery with jQuery

4.1

Markup: analysis Now to the HTML / CSS in the theme folder, you clone the page.tpl.php file and rename it in

page-taxonomy-term.tpl.php

for you can customize the page code that will use the newly created view. The architecture of the list of thumbnails created by the Views is an unordered list, of which each element is like that (this is the first):

\u0026lt;li class = "views- row-row-1 views views views-row-odd-row-first "> \u0026lt;div

class="views-field-field-bijou-foto-fid">

<div class="field-content"><a href="/articoli/callas-01"><img src="http://voilalebijou.com/sites/default/files/imagecache/collezioni_thumb/foto/callas-01/callas1.jpg" alt="" title="Girocollo Callas 01" class="imagecache imagecache-collezioni_thumb imagecache-default imagecache-collezioni_thumb_default" width="80" height="80" /></a></div>
</div>

<div class="views-field-markup">

<span class="field-content"><span class="img-link" title = "Callas 01 under the bijou and the path of his big picture, we have created before.

The markup customfield makes little sense, I realize. Unfortunately Views base does not allow customization of the output of the various fields, whose contents are always placed in a

span.field

-content, even when this could create problems of validation (for example, if one were to include a heading or other

 
 block level elements ...). The quickest solution is to use the Semantic Views 
 
 form, which allows us to choose and customize the tags that represent the fields shown. But this is not really necessary. 
 
 
 For a film strip horizontal (and not a list-vertical list) we need CSS for 
 \u0026lt;li> 
 in the page template (page-taxonomy-
 term.tpl.php 
): 

. views-row {display: inline -table; width: 100px;}

property

inline-table allows us to have thumbnails next to each other in each row, while the width gives us greater horizontal spacing.
1. 4.2
2. View enlarged image with jQuery The plan is this:

\u0026lt;div> insert between the title Page \u0026lt;h3> and the list \u0026lt;ul> , where see the big picture with its title, related to the jewelry represented
Download now enlarge the first thumbnail
click on each link the thumbnail image with the update, replacing the current one on the thumbnail clicked. finally switching to jQuery, and proceed as follows: first of all you must save the data we need, which are:

the link to the destination node

 
 the path of a big load 
 
 the title of the node to be displayed together with the image bigger. 
 

It starts with the first element of the list, because we want its size to be displayed when the page loads. Just log on to its href attribute:
var item = $ ('. Views-to-first row: first'). Attr ('href');

The other two parameters we had entered into the title of \u0026lt;span> created with customfield, but since it is a single string with two attributes, before you can use must be separated. Here's how:
var rel = $ ('. Views-first-row'). Find ('. Img-link'). Attr ('title');
rel.split var = split ("

var title = split [0];
1. imglink var = split [1]; The Javascript method split, given a string, returns an array with the results of the subdivision. The character " href = "'+ item +'"> '+ title +' \u0026lt;/ a> \u0026lt;/ div> ');
The
2. div # zoom
format it with this CSS: # zoom {

width: 400px; / * the exact width of a great date ImageCache * /

height: 270px;
1. margin: 5px auto;
position: relative;}
Inside, we added two tags

\u0026lt;a> ;
: the first contains the image, the second (
.

 desc) its title, format it with that label, like this: 

. desc {background: url (\u0026lt;? php print $ base_path. $ directory;?> / images / fold.png) top left no-repeat; color: # d00000; font: 1em Monika, 'Monika italic', "trebuchet ms", sans-serif; text-align: center;
text-decoration: none;
position: absolute;

 bottom: 50px; right:-3em; 
 padding: 1em;} 
 
 
 The php in the background property is used to print the path to the folder of the theme, where there is the background image with the "fold" label. 

The font "Monika" is a calligraphic character very much in keeping with the argument: "Monika italic" is the font that I created with Font Squirrel to import it with the method

@ font-face, while the first "Monika" is the standard name of the font (so if anyone has it already installed on your computer, use that which is usually rendered better).

The absolute and relative positioning of the container div #

 
 zoom, which we declared as a special purpose 

position: relative .
Now the newly loaded page shows the magnification of the first thumbnail, with a label with the title. Both link to the node appears.

 To extend the magnification features thumbnail to the other, simply replicate the code to the click of each thumb, with some minor modifications: 
 
 
 $ ('.-row views to'). click (function () {var 
 itemlink = $ (this). attr ('href'); 
 var rel = $ (this). parents ('. views-row'). find ('. img-link'). attr ('title'); 
 rel.split var split = ( " class = "desc" href = "'+ itemlink +'"> '+ title +' \u0026lt;/ a> '); 

$ ('. zoom '.) hide (). FadeIn (500);
return false ; }); as a transition between two photographs, we put a fade out / fade in (in practice hides the image making it dissolve into thin air, while the change is hidden image appears, and then we make it reappear beautiful new) for the rest of the script is identical in its operation.

 return false; 
 serves to prevent the browser to follow the link to the node: the thumbnail only serve to enlarge the image. 
 
 Now This page has everything it needs for basic operation. 
 
 
 
 4.3 
 

effects for the film strip now add some simple effects of selection and hover for the thumbnails. Here's what to implement: The

thumbnail, from 80% opacity, will become completely opaque on mouse At the same time, it will fade a red border The thumbnail image currently displayed will have two fixed characteristics upon himself.

First, a bit 'of CSS for the default look of thumbs:


.-Row views to
img {opacity: .8;

-moz-opacity: .8; 
 filter: alpha (opacity = 80); 
 padding: 1px;} 
 
.-Row views to {
 outline: none;} 
 
 
 statement 
 Some cross-browser opacity and padding to create the "edge" that will be the first to make only one change of 
 background-color 
. I removed the link from the outline of the thumb because it is unattractive when a link does not leave the page. 

Let the behavior of the thumb when the pointer passes over them. Here is the jQuery code, just Prefix it to what we have written before to view image Enlarge:

$ ('.-row views to'). hover ( function () {
$ (this). children ('img'). animate ({opacity
: 1,
backgroundColor: "# d00000 "
}, 300);}
, function () { $ (this). children ('img'). animate ({ opacity: .8, backgroundColor:" # 000 "}, 300); });

The only thing to note here is that to make the animation of the background-color

1. (which thanks to the padding above gives us the illusion of creating a border around the image ) you need to insert the plug
jquery.color
2. , for example by including in the file. Info Drupal theme of the following statement (in this way, however, will be loaded on every page - something you definitely want in my project):
scripts [] = scripts / jquery . color.min.js

(of course after putting the file stated in the specified subfolder of the theme's directory, which in my case is "scripts").

 The version of the plugin I mentioned is optimal because it works with Safari (no other go). 
 Now, to change the properties of the thumbnail on the current image, create a CSS class that saddled from time to time in the thumb clicked: 
 
 
. 
 current img {opacity: 1! important; 
-moz-opacity: 1! important; 
 filter: alpha (opacity = 100)! important; 
 background-color: # d00000! important; 
 The declarations} 

! important we need to come over to the settings set by other operations of the jQuery script.

To attach / detach from the thumb as they are clicked the methods we use jQuery AddClass / removeClass. First is attributed to the first thumbnail, the image that is displayed by default:

 $ ('. Views first-row-a '). AddClass (' current '); 
 var item = $ ('. Views first-row-a'). Attr ('href'); 
 / * [...] * / 
 
 
 event and then click on each thumb: 
 
 
. Click (function () 
 {$ ('. views-row'). find ('. current'). removeClass ('current'); 
 $ (this). AddClass ('current'); 
 itemlink var = $ (this) . attr ('href'); 
 / * [...] * / 
 
 

With this we're done!
5

Complete script

Here is the full script that we have built up step by step :


$ (document). ready (function () {

$ ('. views-first-row a').addClass('current');
var item = $('.views-row-first a').attr('href');

 var rel = $('.views-row:first').find('.img-link').attr('title'); 
 var split = rel.split(" 
 
 $ ('. Views-row a'). Hover (
 function () {
 $ (this). Children ('img'). Animate ({

opacity: 1,
backgroundColor: "# d00000" } , 300); },
function () {
$ (this). children ('img'). animate ({
opacity: .8,
backgroundColor: "# 000"

}, 300); 
} 
 ). click (function () {
 $ ('. views-row'). find ('. CurrentVersion'). removeClass ('current'); 

$ (this). addClass ('current');
was itemlink = $ (this). attr ('href');
was rel = $ (this). parents ('. views-row'). find ('. img-link'). attr ('title'); Var split =
rel.split ("

  width: 100px; 
 } 
 .views-row a{ 
  outline: none; 
 } 
 .views-row a img{ 

opacity: .8;
-moz-opacity: .8;
filter: alpha(opacity=80);
padding: 1px; } #zoom{ width: 400px; height: 270px; margin: 5px auto;
position: relative;
}
.desc{

  background: url(<?php print $base_path.$directory; ?>/images/fold.png) top left no-repeat; color: #d00000; 
  font: 1em Monika, 'Monika italic', "trebuchet ms", sans-serif; 
  text-align: center; 
  text-decoration: none; 
  position: absolute;  
  bottom: 50px; right: -3em; 
  padding: 1em; 
 } 
  
 .current img{ 
  opacity: 1 !important; 
  -moz-opacity: 1 !important; 
  filter: alpha(opacity=100) !important; 
  background-color: #d00000 !important; 
 }