Такой эффект делается при помощи цсс3 и джеквери, очень красиво, элегантно, позволяет сделать сайт оригинальный и креативным.
Что делает данный эфект:
1. При помощи джеквери накладывает класы для картинки, на которую навели мышкой, и для картинок остальных. При этом картинка при наведении получает клас активной картинки. к которому можно будет прицепить любой эфект.
2. При помощи цсс мы делаем стили для активной картинки, чтобы она например увеличивалась с тенькой, как на рисунке.
Данный пример нашла в интернете на английском, но для Друпала он не совсем подходил, потому переделали и решили выложить свой вариант, который будет нормально работать в cms Drupal, мы делали это в Друпале 7, в других версиях не проверяли.
Посмотреть пример данного эффекта можно вот тут http://www.conferancie.ru/geo-world, в будущем это будет проект conferancie.ru/geo-worlds
Ну и описываю, что нужно делать, для того, чтобы выполнить такой эффект.
Создаем файл js, называем его например "pop-up-pic.js", в этом файле прописываем вот такой код
(function ($) {
// Custom.init;
Drupal.behaviors.PopupInit = {
attach: function (context, settings) {
var $container = $('.field-items'),
$articles = $container.children('.field-item'),
timeout;
$articles.mouseenter( function( event ) {
var $article = $(this);
clearTimeout( timeout );
timeout = setTimeout( function() {
if( $article.hasClass('active') ) return false;
$articles.not($article).removeClass('active').addClass('blur');
$article.removeClass('blur').addClass('active');
}, 75 );
});
$container.mouseleave( function( event ) {
clearTimeout( timeout );
$articles.removeClass('active blur');
});
}
}
})(jQuery);
Только внимательно необходимо смотреть в код этого джееса, там возможно надо будет поменять класы на ваши. Затем прописываем код в css:
/*pop-up-pictures-for-jornal-node*/
.node-journal .field-name-field-image:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.node-journal .field-name-field-image .field-items {
position: relative;
display: block;
}
.node-journal .field-name-field-image .field-items:before,
.node-journal .field-name-field-image .field-items:after
.node-news-geo-world .field-name-field-image .field-items:before,
.node-news-geo-world .field-name-field-image .field-items:after {
content:"";
display:table;
}
.node-journal .field-name-field-image .field-items:after {
clear:both;
}
.node-journal .field-name-field-image .field-items .field-item {
display: block;
width: 140px;
height: auto;
background: #fff;
cursor: pointer;
float: left;
border: 10px solid #fff;
text-align: left;
text-transform: none;
margin: 15px;
z-index: 1;
-webkit-backface-visibility: hidden;
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 1px 3px 10px rgba(0,0,0,0.2);
-webkit-transition:
opacity 0.4s linear,
-webkit-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-moz-transition:
opacity 0.4s linear,
-moz-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-o-transition:
opacity 0.4s linear,
-o-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
-ms-transition:
opacity 0.4s linear,
-ms-transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
transition:
opacity 0.4s linear,
transform 0.4s ease-in-out,
box-shadow 0.4s ease-in-out;
text-align: center;
}
.node-news-geo-world .field-name-field-image .field-items .field-item{
width: 165px;
}
/* Hover Style for all the items: blur, scale down*/
.node-journal .field-name-field-image .field-items .field-item.blur {
box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
-webkit-transform: scale(0.9);
-moz-transform: scale(0.9);
-o-transform: scale(0.9);
-ms-transform: scale(0.9);
transform: scale(0.9);
opacity: 0.7;
}
/* Hover Style for single item: scale up */
.node-journal .field-name-field-image .field-items .field-item.active {
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-o-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);
box-shadow:
0px 0px 0px 10px rgba(255,255,255,1),
1px 11px 15px 10px rgba(0,0,0,0.4);
z-index: 100;
opacity: 1;
}
/*end-pop-up-pictures-for-jornal-node*/
Опять же необходимо внимательно смотреть на стили и классы, у вас они будут свои, позже выложу пример в виде нтмл, чтоб было удобнее переносить у вам на сайт. Всем удачи!
При верстке Друпал проекта частенько не хватает дивов или классов для какой-то изворотистой верстки. И часто такие дела сложно сделать через темплейты или шаблоны. Для таких целей темизатору необходимо знать не только систему Друпал, но частенько нужны знания jquery, чтобы при его посмощи прицепить дополнительный нудный класс для дива, обвернуть див в еще что-то и так далее.
