ссылка на другое изображение (галерея изображений)

0

Поэтому я в основном хочу иметь возможность нажимать на любое из небольших изображений и отображать их в области большего размера над ними. Как галерея. Его там все равно сделать это с помощью HTML/CSS?

Вот мой код:

HTML

<div class="mainInfo">
<div class="gallery">
    <div class="displayImage">
        <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
    </div>
    <div class="thumbImage">
                    <a href="#"><img src="../assets/images/gallery/gallery1.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery2.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery3.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery4.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery5.png" alt=""></a>
                    <a href="#"><img src="../assets/images/gallery/gallery6.png" alt=""></a>
    </div>

</div>

CSS

.mainInfo {
height: 800px;
background-color:#FCFCFC;
color:#001D5D;
}

 .gallery {
float: left;
}

.thumbImage {
margin-top:575px;
}
 .thumbImage img {
width:140px;
height:auto;
margin-left:15px;
 }
.displayImage {
margin:89px 0 0 177px;
}

.displayImage img {
width:600px;
height:auto;
}
Теги:
hyperlink
image

4 ответа

0
Лучший ответ

Да, ты можешь сделать это. Но здесь вам нужно немного JavaScript.

Здесь я даю вам аналогичный код, который вы написали выше.

<html>
 <head>
 <script>
function display(imgElement){
    document.getElementById('displayimg').setAttribute('src',imgElement.getAttribute('src'));
    }

</script>
<style>
#display{
border:solid 1px blue;
width:90%;
height:60%;
margin:auto;
}
#select{
padding:10% 1% 1% 1%;
width:95%;
height:25%;
mrgin:auto;
}
#display img{
border:solid 1px red;
width:100%;
height:100%;
}
#select img{
border:solid cyan 1px;
floatLleft;
width:50px;
height:25px;
}
#select a{
border:solid green 1px;
}
#select a:hover,a:active{
border:solid yellow 1px;
}
</style>
</head>
<body>
<div id="display">
    <img id="displayimg">
</div>
<div id="select">
<img id="selectimg" src="D:\D drive\147266.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\d1x5u3.png" onclick='javascript:display(this)'>
<img id="selectimg" src="D:\D drive\ct0.jpg" onclick='javascript:display(this)'>
    <img id="selectimg" src="D:\D drive\aftn.jpg" onclick='javascript:display(this)'>
</div>
 </body>

и выход будет таким:

Изображение 174551

Это так же просто, как и ваше требование. но вам нужно сделать гораздо больше для создания галереи изображений.

Если вы хотите отобразить изображение, когда вы наводите мышь на изображение, просто замените onclick на onmouseover.

Поделиться
  • 0
    Сейчас я просто играю с этим. У меня есть Javascript во внешнем файле и я связал его с HTML, но сценарий, похоже, не работает. Есть ли что-то еще, что мне нужно добавить в сценарий, когда он связан внешне? Извините, я не знаю много о JavaScript
  • 0
    Вы должны изменить тег script как <script src="image.js"></script> и удалить код JavaScript между тегами <script> и поместить в другой файл с именем image.js . Тогда все будет работать нормально.
Показать ещё 1 комментарий
1

Нет, когда вы хотите что-то, вызванное щелчком, вам нужно использовать javascript. Самое близкое, что вы можете получить, - это наведение мыши.

Поделиться
0

Нет, вы не можете сделать это с помощью только ваших HTML и CSS. Что вы можете сделать с этим кодом, добавьте немного javascript для достижения того, чего вы хотите.

Итак, поскольку вы не указали javascript как вариант, я предположил, что вы не знаете, как это сделать, используя javascript, и я позволил вам написать вам скрипку, чтобы вы могли понять, что ваш следующий шаг, если вы хочу сделать это с помощью javascript.

Возможно, сейчас это трудно понять, но как только вы начнете изучать фактический javascript, вы не почувствуете необходимости искать плагины, виджеты или даже помогать делать что угодно на своей веб-странице, приложениях и т.д.

Не стесняйтесь запрашивать объяснения по любой части кода.

скрипка

(я не менял изображения, поэтому они не появляются. Если вы хотите увидеть какое-то изображение, просто измените их src)

Javascript:

var thumbImages = document.getElementsByClassName('thumbImage')[0].children;

[].forEach.call(thumbImages, function (item) {
    item.addEventListener('click', function (e) {
        var gallery = document.getElementsByClassName('displayImage')[0];
        gallery.innerHTML = '';
        gallery.appendChild(e.currentTarget.cloneNode(true));
    }, false);
});
Поделиться
  • 0
    Да, Матеус, это хорошее решение. Но я думаю, что нам нужно удалить дочерний элемент перед добавлением дочернего элемента в «displayImage». Иначе, appendChild() добавит еще одного потомка вместе с тем, который у вас уже есть в качестве дочернего элемента в div «displayImage». Я надеюсь, что мы должны использовать removeChild() . Но, пожалуйста, поправьте, если я ошибаюсь. Потому что я тоже учусь, а не эксперт.
  • 0
    Я думаю, что это уже удалено на gallery.innerHTML = '', но я могу ошибаться.
Показать ещё 1 комментарий
0

Вы не можете делать это только с помощью CSS.

Взгляните на эти сайты http://lokeshdhakar.com/projects/lightbox2/ и http://fancybox.net/

Вы можете загружать и использовать эти плагины в соответствии с вашими потребностями или писать свой собственный плагин, если у вас достаточно навыков в Javascript или используйте любую другую библиотеку (например, jQuery - http://jquery.com/), написанную на Javascript.

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню