Как создать галерею и изображение с помощью миниатюр и стрелок

Question

Как создать галерею и изображение с помощью миниатюр и стрелок

0

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

HTML:

<html>

<head>

<link rel="stylesheet" type="text/css" href="1.css" />

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" type="text/javascript"></script>

<script type="text/javascript" src="1.js"></script> 

</head>

<body>

<!--part a-->
<div id="imag">
<div class="imageDiv">
<div>
    <img src="http://www.talkandroid.com/wallpapers/images/1/small/1_3D_Landscape__54_.jpg" class="image"/>
</div>
<div>
    <img src="http://www.ifpindia.org/ecrire/upload/mount_landscape01.jpg" class="image"/>
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/gran_paradiso_wallpaper_landscape_nature_wallpaper_1538.jpg" class="image" />
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/desert_wallpaper_landscape_nature_wallpaper_1062.jpg" class="image" />
</div>
<div>
    <img src="http://www.bathnes.gov.uk/sites/default/files/siteimages/Environment/Trees-and-Woodlands/16cotswolds1-200x150.jpeg" class="image" />
</div>
<div>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/amazing_sunset_wallpaper_landscape_nature_wallpaper_1506.jpg" class="image" />
</div>
<div>
    <input type="image" src="right arrow.png" class="rightarrow" width="10" height="35"/>
</div>
<div>
    <input type="image" src="left arrow.png" class="leftarrow" width="10" height="35"/>
</div>
</div>
</div>
<!--part a-->

<!--part b-->
<div id="box">
<div class="area">
    <img src="http://www.talkandroid.com/wallpapers/images/1/small/1_3D_Landscape__54_.jpg"/>
    <img src="http://www.ifpindia.org/ecrire/upload/mount_landscape01.jpg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/gran_paradiso_wallpaper_landscape_nature_wallpaper_1538.jpg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/desert_wallpaper_landscape_nature_wallpaper_1062.jpg"/>
    <img src="http://www.bathnes.gov.uk/sites/default/files/siteimages/Environment/Trees-and-Woodlands/16cotswolds1-200x150.jpeg"/>
    <img src="http://images.all-free-download.com/images/wallpapers_thum/amazing_sunset_wallpaper_landscape_nature_wallpaper_1506.jpg"/>
</div>
</div>
<!--part b-->

</body>

</html>

CSS:

#imag {
float:left;
padding:5px;
height:338px;
width:450px;
  }

.rightarrow {
position: absolute;
width:40px;
top: 10px;
left:400px;
}
.leftarrow {
position: absolute;
width:40px;
top: 10px;
left: 0px;
}

#box {
width: 222px;
height: 343px;
overflow-y: scroll;
overflow-x: hidden;
 }

.area img {padding-bottom: 5px;}

JS:

$(document).ready(function () {
$('img:not(:first)').hide();
$(".rightarrow").click(function () {
    $('img:not(:last):visible').
    hide().
    parent().
    next().
    children().
    show();
});
$(".leftarrow").click(function () {
    $('img:not(:first):visible').
    hide().
    parent().
    prev().
    children().
    show();
});
});

Я только начал изучать HTML, поэтому я не слишком уверен, что это лучший способ сделать это, но это то, чем я до сих пор справлялся. Теперь проблема в том, что если я удалю часть b, часть a отлично работает. Если я удалю часть a и js строк из секции заголовка кода, то часть b отлично работает. Поэтому мой вопрос заключается в том, как вы можете объединить обе части, чтобы они работали вместе правильно?

oliveirano25 16 дек. 2013, в 18:13

Источник

0

можешь поиграть в jsffiddle.net
Vivek Vikranth 16 дек. 2013, в 17:12
0

Да, я пробовал играть на скрипке, но получаю тот же результат
oliveirano25 16 дек. 2013, в 19:12

Теги:

javascript

jquery

html

css

1 ответ

Ещё вопросы

Да, я пробовал играть на скрипке, но получаю тот же результат

Kim T · Answer 1 · 2013-12-16T16-07-00.000Z

Вы можете использовать хеш-хеш для изменения слайда. Затем сохраните индекс с помощью javascript и используйте его для перехода к следующему или предыдущему слайду

<div class="carousel-full">
    <ul>
        <li id="item5">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
        <li id="item6">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Example long title goes here</span>
        </li>
        <li id="item7">
            <img src="http://www.eightyonedesign.co.uk/blog/wp-content/uploads/2009/04/70-photography-2.jpg" />
            <span>Example Title 1</span>
        </li>
        <li id="item8">
            <img src="http://www.stevegoslingphotography.co.uk/images/general/steve_gosling_photography.jpg" />
            <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer elit elit, euismod ut fermentum sit amet, molestie non nisi. Cras placerat aliquet hendrerit. Nulla turpis sapien, ultricies ac rutrum ac, elementum vitae diam.</span>
        </li>
    </ul>
</div>
<div class="carousel-nav">
    <ul>
        <li><a href="#prev">Previous</a></li>
        <li><a href="#item5">Item 5</a></li>
        <li><a href="#item6">Item 6</a></li>
        <li><a href="#item7">Item 7</a></li>
        <li><a href="#item8">Item 8</a></li>
        <li><a href="#next">Next</a></li>
    </ul>
</div>

И css:

.carousel-nav {
    padding: 5px;
    background-color: grey;
}

.carousel-nav li {
    display: inline-block;
}

.carousel-full {
    overflow: auto;
    padding: 10px;
}

.carousel-full ul {
    white-space: nowrap;
}

.carousel-full li {
    width: 100%;
    display: inline-block;
    white-space: normal;
    vertical-align: top;
}

.carousel-full img {
    float: left;
}

.carousel-full span {
    clear: left;
    float: left;
}

И javascript:

var current = 0,
    total = document.querySelectorAll('carousel-full li').length;

$('carousel-nav a').click(function () {
    var id = parseInt($(this).attr('href').slice(4));
    if (id) {
        current = id;
    }
});

$('carousel-nav a[href="#next"]').click(function () {
    e.preventDefault();
    if (current < total) {
        current = current + 1;
    } else {
        current = 0;
    }
    window.location.hash = 'item' + current;
});

$('carousel-nav a[href="#prev"]').click(function (e) {
    e.preventDefault();
    if (current > 0) {
        current = current - 1;
    } else {
        current = total;
    }
    window.location.hash = 'item' + current;
});

Спасибо за ваш ответ, но я не уверен, что ваш дизайн - то, что я ищу. Я хочу создать что-то вроде этого, но с миниатюрами, расположенными вертикально, а не горизонтально: tympanus.net/Tutorials/ResponsiveImageGallery