drupal ShowCase на views_slideshow

Опубликовано Vladimir - пт, 15.01.2010 - 11:36

Можно, однако задача slideshow в другом

Он умеет показвать и крутить картинки (из нод, директории, и т.п.)

В данном случае это функционал - показа главной 4 превьюшек + одной увеличенной при выборе или наведении.

То же можно реализовать просто на view + js, однако, так напишете тот же функционал.

Добавить комментарий

Содержимое данного поля является приватным и не предназначено для показа.

Filtered HTML

  • Допустимые HTML-теги: <a href hreflang> <em> <strong> <cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <p> <br><b><i> <img src alt height width>
  • Строки и абзацы переносятся автоматически.
  • Адреса веб-страниц и email-адреса преобразовываются в ссылки автоматически.

Можно сделать галерею с просмотром

1. Ставим модуль views_slideshow

2. Создаем Представление (View) в котором выводим 4 картинки прикрепленные attach или imagefield к соответствующим материалам.

3. Настраиваем views_slideshow для работы с нашим видом

4. Форматируем графическое представление при помощи стилей

/* Showcase settings  */

/* width of Gallery ShowCase block Fix fo IE*/
#block-views-GalleryMini-block_1
{
width:225px;
}

/* width of Gallery ShowCase block Fix for IE*/
.view-GalleryMini
{
width:210px;
}

/* Preview images size (1/2 for 2 columns layout) and paddings*/
.views_slideshow_singleframe_pager div a img {
width: 90px;
height: 90px;
padding-left:5px;
padding-bottom:5px;
}
/*show preview image divs in line*/
.views_slideshow_singleframe_pager div {
display:inline;
padding-left:0px;
}
/*default preview images border (For example: same as background color)*/
.views_slideshow_singleframe_pager.thumbnails a img {
border: 1px solid #CAE5C6;
}
/*hover preview images border (For example: same as background color)*/
.views_slideshow_singleframe_pager.thumbnails a.activeSlide img {
border: 1px solid #fff;
}
/*Active pager number style*/
.views_slideshow_singleframe_pager.numbered a.activeSlide {
text-decoration: underline;
}

5. Для перехода на материалы содержащие картинки при клике на превьюшки

необходимо подправить javascipt файл -

<DRUPAL>/modules/views_slideshow/contrib/views_slideshow_singleframe/views_slideshow.js

Заменить фрагмент формирующий ссылки превью (в pager-е)

...

if (settings.pager_type == 1) {
return '<div class="' + classes + '"><a href="#"><img src="' + $(slide).find('img').attr('src') + '" /></a></div>';
}
else

...

НА

...

if (settings.pager_type == 1) {
return '<div class="' + classes + '"><a href="' + $(slide).find('a').attr('href') +'"><img src="' + $(slide).find('img').attr('src') + '" /></a></div>';
}
else

...