Как вывести картинки одна на другой все разом и по клику на ссылку менять которая из них лежит «сверху» всех?

Question

[Алексей]

Установлен JS

<script type="text/javascript">
function l_image (a) {
    document.example_img.src=a
}
</script>

он ссылки вида

<a href="javascript:l_image ('http://site.ru/pic.jpg')">Текст</a>

по клику на них выводит в месте, где стоит код

<img src="/wp-content/uploads/2017/11/Музей-иллюзий.jpg" name="example_img"
  alt="Картинки для демонстрации работы скрипта смены изображений" width="100%">

ВОПРОС
Как сделать что все такие ссылки на странице сразу загружались в нужное место одна на другую, а "наверх" (т.е. перекрывала все остальные) нужная картинка выводилась по клику на соответствующую ссылку

Answer 1

[Stalker_RED]

Вы так постепенно дойдете до того, что с нуля изобретете один из слайдеров.

https://bxslider.com/examples/image-slideshow-captions/
kenwheeler.github.io/slick
https://owlcarousel2.github.io/OwlCarousel2/demos/...

Comments

[Алексей]

ну наверное не совсем полно поставил вопрос. ссылки идут не подряд, а среди текста.
Вообще желательно даже чтобы картинки вставленные в текст ( сопределенным классом) собирались в такую галерею, а на их месте появлялись ссылки которые выводят нужное изображение в галереи.
Есть такая галерея?

[KazeZlat]

Ну судя по alt-у картинки он осознанно к этому идет :D

[Stalker_RED]

KazeZlat, похоже, он хочет что-то вроде magnific popup, только чтоб вьюшка не закрывалась и висела где-то сбоку. Но он не может же это объяснить, и должно пройти несколько недель и полтора десятков вопросов, чтобы это выяснить.

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

[Алексей]

Stalker_RED, ну почему же, вроде научился вставлять JS. Так что если у вас есть эти 5 строчек...

точнее даже не так, я уже "умею" все картинки с определенным классом превращать в ссылки и выводить в одном месте по клику на них

function l_image (a) {
    document.example_img.src=a
}
jQuery (document).ready(function () {
   jQuery ('.class1').each(function () {
       jQuery (this).after('<a href="javascript:l_image(\'' + jQuery (this).attr('src') + '\')">' + jQuery (this).attr('title') + '</a>').remove();
    });
});

Но изначально, как вы наверно поняли, делается это из кода вставленных картинок, Так вот:
Как выводить все картинки разом и с title и alt которые у них есть, а сами картинки ссылками становятся, как уже сделано.

[Stalker_RED]

Алексей selftrips.ru, вы не поверите.

[Алексей]

Stalker_RED, Не понял что вы этим хотели сказать? Почему я не поверю?

Answer 2

[KazeZlat]

Вообще тут даже JS не особо нужен, можно управиться одними HTML+CSS.

Как то так:

<p>
	Текст текст <a href="#one">ссыль1</a> текст <a href="#two">ссыль2</a>
	Еще текст лорем ипсум <a href="#three">все дела</a> сит амет 
	И еще <a href="#four">ссыль4</a>
</p>
<div class="slider">
	<img id="one"   src="image1.jpg">
	<img id="two"   src="image2.jpg">
	<img id="three" src="image3.jpg">
	<img id="four"  src="image4.jpg">
</div>
<style type="text/css">
	.slider {
		position: relative;
		overflow: hidden;
	}
	.slider img {
		display: none;
		position: absolute;
	}
	.slider img:target {
		display: inline;
	}
</style>

CSS-transition по вкусу, для появления плавного можно использовать вместо display свойства width или opacity вместе с transition

Comments

[Алексей]

Не совсем там

function l_image (a) {
    document.example_img.src=a
}
jQuery (document).ready(function () {
   jQuery ('.class1').each(function () {
       jQuery (this).after('<a href="javascript:l_image(\'' + jQuery (this).attr('src') + '\')">' + jQuery (this).attr('title') + '</a>').remove();
    });
});

"Простые" картинки делаются ссылками. Только надо чтобы они картинки еще "все разом" вывелись с персональными alt и title и по клику переключались. Как это сделать?
ps
В чем "прелесть," что это решение по стандартным тексту и картинкам (т.е. можно применить к старым страницам и скопом без их переделки!!)

[KazeZlat]

Алексей selftrips.ru, вы попросили вывести все картинки сразу друг на друге - мой код это делает без JS и даже переключает их, не понимаю чего вы хотите добиться от меня. В моем коде каждая картинка - отдельный тег img, пишите к ним alt и title в свое удовольствие.