Галерея изображений лайтбокс

Question

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

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

Пример:

Когда я нажимаю изображение в DIV я получаю ЦСИ ПИК позволяет говорить о том, что источник:

SRC = «redpic.jpg»

Тогда давайте говорить в моих изображений папка у меня есть большая версия ПИКА, выбранный источник:

SRC = «redpic_large.jpg»

будет ли возможность манипулировать Пульт SRC о f первое изображение img src = "redpic.jpg", добавив _large в конец, а затем добавив его в мой lightbox ???

Каждый раз, когда я пытаюсь делать что-то с моими изображениями, я всегда сталкиваюсь с проблемами.

сказать SRC = «redpic.jpg», когда я проверить в консоли Пульт SRC идет к чему-то вроде //139.0.0.1:56328/img/dotted.jpg и, кажется, вызывает у меня много проблем

Answer 1

Конечно, вы можете получить источник изображения, как это:

$("img").on("click", function(){ 
    var source = $(this).attr("src"); 
}); 

Это даст вам полный путь (redpic.jpg).

Вы можете использовать split(), чтобы получить массив обеих частей (имя и расширение)

var parts = source.split("."); 

Теперь, все, что вам нужно сделать, это присоединить «_large» в первой части источника , объедините их обратно и установите источник другого изображения в качестве вновь собранного.

parts[0] += "_large"; 
var newSource = parts.join("."); 

Вы передаете период . к функции join так, что она ставит период в betwen ваших элементов, а не по умолчанию запятая ,.

Все, что осталось сделать, это использовать newSource в качестве исходного атрибута другого изображения.

$(".other-image").attr("src", newSource);