inline-table allows us to have thumbnails next to each other in each row, while the width gives us greater horizontal spacing. - 4.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]; - 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 - div # zoom
format it with this CSS: # zoom {-
width: 400px; / * the exact width of a great date ImageCache * /
height: 270px; - 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
- (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 - , 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;
}