Как сделать простейшую галлерею?

Question

[akgndkut]

Как сделать простейшую галерею буквально из самых простых способов? Нужно, чтобы справа и слева были стрелочки(это все я могу создать), и нажимая на правую, картинка по центру менялась бы на другую, на левую - возвращалась бы, если быстро подсказать, как такое реализовать не сможете, хотя бы направьте., возможно ли такое без Javascript?

Comments

[akgndkut]

codepen.io/mikellow/pen/adwjjO
есть такая галерея, хорошая, но написана другим, а копирование бы привело к нарушениям авторского права или это фан-галерея для публичного использования?

Answer 1

[Web Developer Blog]

легче простого, воспользуйтесь owl-carousel

Answer 2

[Сергей Горячев]

lightGallery попроще fancy будет
а вообще, если всё совсем просто нужно, посмотрите тут, портфолио
там буквально 10 строчек кода, превьюшки и оригинальные картинки
конечно, не без jquery, но всё же

Comments

[Сергей Горячев]

$('.portfolio_small img[data-portfolio]').on('click', function(){
        $('.translucent, .popup_portfolio').fadeIn(250);
        $('.popup_portfolio_wrapper img').attr('src', 'img/portfolio_0' + $(this).data('portfolio') + '.jpg');
        $('.popup_portfolio').data('data-portfolio', $(this).data('portfolio')).attr('data-portfolio', $(this).data('portfolio'));
        $('.popup_portfolio_wrapper').animate({scrollTop:0},0);
        $('body').css({'overflow-y':'hidden'});
    });

    $('.translucent').on('click', function(){
        $('.translucent, .popup_portfolio, .popup_feedback').fadeOut(250);
        $('body').css({'overflow-y':'scroll'});
        setTimeout(function(){
            $('.popup_portfolio_wrapper img').attr('src', '');
            $('.popup_portfolio').attr('data-portfolio', '');
        },250);
    });
    $(this).keydown(function(e){
        if (e.which == 27)
        $('.translucent').click();
    });

    $('.popup_portfolio_prev').on("click", function() {
    	var prevIte = $('.popup_portfolio').attr('data-portfolio');
    	$('.popup_portfolio').fadeOut(0);
    	$('.portfolio_small img[data-portfolio]').eq(prevIte - 2).click();
    });
    $('.popup_portfolio_next').on("click", function() {
    	var nextIte = $('.popup_portfolio').attr('data-portfolio');
    	$('.popup_portfolio').fadeOut(0);
    	$('.portfolio_small img[data-portfolio]').eq(nextIte).click();
    });

Вот и весь скрипт галереи с моего сайта.
По клику на картинку с data-атрибутом, открываем оригинал.
При клике на стрелочки, идет навигация.
Если слайд первый - скрываем переход к прошлому слайду.
Если последний - скрываем переход к следующему.
Писал на коленке, нужно было быстро.

Answer 3

[Максим Козлов]

fancybox

Comments

[akgndkut]

можно ли подключиться к библиотекам удаленно? а еще надо, чтобы при наведении на изображение менялась картинка, изменив что-то в css, не будет ли это нарушением авторских прав?

[Максим Козлов]

на оф сайте есть примеры

Answer 4

[Александр Слыжук]

FOTORAMA Вам в помощь