Вопрос по функции .replace в JavaScript?

Question

[Юрий]

Добрый день!

fn.showPhoto = function(index) {
var src = this.thumbs[index].getAttribute('src');
this.image.setAttribute('src', src.replace('thumbnails', 'photos'));
this.current = index;
};

Подскажите пожалуйста, если у меня в WordPress и thumbnails и полно размерные фото хранятся в одной и той же папке, как правильно прописать src.replace('thumbnails', 'photos')); ?

То есть мне нужно при клике на миниатюру получить полно размерное изображение из этой же папки, название одинаковые за исключением того что у миниатюры на конце 150x150.jpg

Благодарю!

Answer 1

[Dima Polos]

Можно в шаблон wp вставить к тегу с картинкой, которая миниатюрная, data атрибут с адресом к той, что Вам надо. Через js повесить событие на эту картинку, и по клику или что там Вам надо читать data, где будет урл к большой картинке, и аяксом её грузить.

Comments

[Юрий]

Я совсем ещё зеленый, можете немного разжевать..

Вот конструкция:

//здесь должна выводиться полно размерная фотография, но выводится миниатюра.

<?php
$image = get_field('img-black');
if( !empty($image) ):
// vars
$url = $image['url'];
$title = $image['title'];
$alt = $image['alt'];
$caption = $image['caption'];

// thumbnail
$size = 'thumbnail';
$thumb = $image['sizes'][ $size ];
$width = $image['sizes'][ $size . '-width' ];
$height = $image['sizes'][ $size . '-height' ];

if( $caption ): ?>

<?php endif; ?>



<?php if( $caption ): ?>
<?php echo $caption; ?>

<?php endif; ?>
<?php endif; ?>

Полный JS:

;(function() {
'use strict';

var Gallery = function(id) {
var gallery = document.getElementById(id);
this.thumbs = gallery.querySelectorAll('.thumbs img');
this.image = gallery.querySelector('.photo-box img');
this.count = this.thumbs.length;
this.current = 0;
this.registerEvents();
};


window.Gallery = Gallery;
var fn = Gallery.prototype;
fn.registerEvents = function() {
this.image.addEventListener('click', this.imageControl.bind(this));
this.image.addEventListener('wheel', this.wheelControl.bind(this));
document.addEventListener('keydown', this.keyControl.bind(this));
var self = this;
[].forEach.call(this.thumbs, function(thumb, n) {
thumb.addEventListener('click', self.showPhoto.bind(self, n));
});
};

fn.buttonControl = function(e) {
if (e.target.tagName != 'BUTTON') return;
var self = this,
ctrl = e.target.getAttribute('data-target'),
callShowPhoto = {
'prev': function() {
self.showPhoto((self.count + self.current - 1) % self.count);
},
'next': function() {
self.showPhoto((self.current + 1) % self.count);
}
};

callShowPhoto[ctrl]();
};

fn.imageControl = function(e) {
this.showPhoto((this.current + 1) % this.count);
};

fn.wheelControl = function(e) {
e.preventDefault();
if (e.deltaY > 0) {
this.showPhoto((this.current + 1) % this.count);
} else {
this.showPhoto((this.count + this.current - 1) % this.count);
}
};

fn.keyControl = function(e) {
e.preventDefault();
switch(e.which) {
case 37:
this.showPhoto((this.count + this.current - 1) % this.count);
break;
case 39:
this.showPhoto((this.current + 1) % this.count);
break;
}
return;
};

fn.showPhoto = function(index) {
var src = this.thumbs[index].getAttribute('src');
this.image.setAttribute('src', src.replace('thumbnail', 'photo'));
this.current = index;
};

})();

Изначально были 2 папки с одинаковыми названиями файлов //thumbnail/1.jpg и //photo/1.jpg (миниатюра и полно размерная картинка) , когда перенес данный код в свой шаблон на WP, перестал заменять миниатюру так как все фото хранятся в одной папке, я так понял что дело именно в этой строчке src.replace('thumbnail', 'photo'));

Можно ли просто как то сказать с помощью JS что бы брал src.replace('*150x150.jpg' и отдавал 'без *150х150.jpg')); Или это так не работает?

Благодарю!

[Dima Polos]

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

[Dima Polos]

Юрий, код на js Вы писали?

[Юрий]

Нет писал не я, пока только начал разбираться в javascritp, только чуть переделал под свою задачу. Был бы очень признателен за любую помощь! Благодарю!

[Юрий]

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

[Dima Polos]

Юрий, выложили код и все стало на места.
Надо, чтобы картинки лежали по папкам, как и раньше, желательно.
JS работает следующим образом:
1) Создает объект Gallery, вешает обработку на клик, прокрутку, нажатие стрелок влево-вправо на клавиатуре, и на кнопки вперед-назад в html. При прокрутке, нажатии вперед-назад/влево-вправо вызывается функция показа картинки, меняется счетчик и результат передается как параметр.
2) Берет по селектору '.thumbs img' миниатюры, а по '.photo-box img' еще какие-то картинки. Проверьте, какие в разметке картинки есть в этом селекторе.
3) Когда надо показать картинку просто переписывается адрес текущей картинки на другой. Меняется thumbnail на photo в адресе картинки.

Что с этим делать? Посмотрите, что по указанным селекторам лежит. Как выводятся картинки сейчас?

[Dima Polos]

Юрий, кажется понял, попробуйте все оставить, и поменять ('src', src.replace('thumbnail', 'photo')); на это:
('src', src.replace('150x150', ''));

[Юрий]

Дмитрий, по сути да, слайдер-галерея для карточки товара, что бы сверху большая картинка, снизу миниатюры.. )

[Dima Polos]

Юрий, вот есть неплохой слайдер: kenwheeler.github.io/slick
Можно сделать так, чтобы было два слайдера, каждый слайд связан между собой, сейчас кину видео, как это сделать:
1. https://www.youtube.com/watch?v=MlWkcBqWISk
2. https://www.youtube.com/watch?v=-AFVIf8Uzxo
3. https://www.youtube.com/watch?v=WNyRZytNxl4
Все три как бы продолжение одной темы, а вот сделать два слайдера связанных это в третьем.

[Юрий]

Дмитрий большое спасибо! Попробую реализовать.

[Dima Polos]

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

[Юрий]

Dima Polos, После замены на ('src', src.replace('150x150', ''));
Почти получилось ) Единственное вылазит лишняя (черточка -) перед .jpg



Не пойму от куда она берется?

[Dima Polos]

Юрий, как-то сам сайт глянуть можно?

[Dima Polos]

Юрий, если исходная картинки называлась 1-150x150.jpg, то надо тогда ('src', src.replace('-150x150', '')); вот так прописать. Короче, в исходном названии находите все лишнее, и передаете в src.replace.

[Юрий]

Dima Polos, Да уже увидел! Всё заработало! Большое Вам спасибо, помогли!

[Dima Polos]

Юрий, рад, что получилось) Успехов!

[Юрий]

Dima Polos, И Вам успехов и удачи!

[Dima Polos]

Юрий, спасибо!

Answer 2

[Алексей]

Метод replace умеет работать с регулярным выражением, соответственно

let text =  'img150x150.jpg'
text = text.replace(/\d+x\d+(?=\.)/,'')

вернет img.jpg, но вариант с data атрибутом мне нравиться больше.

Comments

[Юрий]

Большое спасибо! Хорошо буду разбираться..