Настраивать прокручиваемый плагин с prevpage и nextpage поверх изображения? (см. макет)

Я реализую прокручиваемый для галереи портфолио.

(scrollable = прокручиваемый плагин с http://flowplayer.org/tools/index.html)

Там будет один элемент, видимый одновременно.

По умолчанию прокручиваемое положение позиционирует кнопки "предыдущий / следующий" за пределами области изображения, а нажатие на текущее изображение увеличивает прокручиваемый контент.

  1. Я хотел бы иметь предыдущий / следующий рендер в области изображения.
  2. Я хотел бы, чтобы заголовок изображения появлялся при наведении курсора на нижнюю часть изображения.

Макет: http://i303.photobucket.com/albums/nn160/upstagephoto/mockups/scrollable_mockup.jpg

Любые идеи о том, как достичь одного или обоих из них?

Спасибо!

Источник

2 ответа

Решение

Основная часть вашего подхода будет выглядеть так в вашем HTML:

<div id="mainContainer">
  <div class="scrollable">
    <div class="items">
      <div class="scrollableEl">
         <img src="yourimage.jpg" />
         <div class="caption">Your caption</div>
      </div>

      <div class="scrollableEl">
         <img src="yourimage2.jpg" />
         <div class="caption">Your caption 2</div>
      </div>

      ... so on ...
    </div>
  </div>
  <a href="#" class="prev">&laquo;</a>
  <a href="#" class="prev">&laquo;</a>
</div>

И так в вашем CSS:

.scrollable {
    position:relative;
    overflow:hidden;
    width: 660px;
    height:90px;
}

.scrollable .items {
    width:20000em;
    position:absolute;
}

.items .scrollableEl {
    float:left;
    positon: relative;
}

.items .scrollableEl .caption {
    display:none;
    position: absolute;
    bottom: 0;
    height: 100px;
    width: 660px;
}

.items .scrollableEl:hover .caption { /*this will show your caption on mouse over */
    display:none;
}

.next, .prev {
    position: absolute;
    top: 0;
    display: block;
    width: 30px;
    height: 100%;
}
.next {
    right: 0;
}
.prev {
    left: 0;
}
#mainContainer {
    position: relative;
}

JavaScript должен быть довольно стандартным. Надеюсь это поможет!

Источник

ДЕМО: http://jsbin.com/ijede/2 ИСТОЧНИК: http://jsbin.com/ijede/2/edit

$(function() {
    // 5 minute slide show ;-)
    $('.next,.prev').click(function(e) {
        e.preventDefault();
        var pos = parseInt($('.current').attr('id').split('_')[1]);
        var tot = $('.slides a').size() - 1;
        var click = this.className;
        var new_pos = (click == 'next') ? pos + 1: pos - 1;
        var slide = ( click == 'next') ? 
                    (pos < tot ? true : false) : (pos > 0 ? true : false);

        if (slide) $('.current').toggle(500,function() {
          $(this).removeClass('current');
        });
        $('#pos_' + new_pos).toggle(500,function() {
            $(this).attr('class', 'current');
        });
    });
    //cross-browser div :hover
    $('.next,.prev').hover(function() {
      $(this).children().children().fadeIn(500);
    },function() {
      $(this).children().children().fadeOut(500);
    });
    //auto add unique id to each image
    $('.slides a').each(function(e) {
        $(this).attr('id', 'pos_' + e);
        if (!e) $(this).attr('class', 'current');
    });
});​

CSS на источник!

ПРИМЕЧАНИЕ: поскольку чтение документации по плагину требует от меня больше времени, чем создание слайд-шоу с нуля, я сделал новый!

надеюсь, вам понравится!

Источник
Другие вопросы по тегам