Правка js в шаблоне.

iccup
На сайте с 01.05.2016
Offline
195
538

Есть шаблон от w3layouts. https://p.w3layouts.com/demos/photo_cart/web/

Там прикольно реализовали превью с js. Вот кусок html, это я как понял задают data для js.

<li>

<a href="#" data-largesrc="images/img2_b.jpg" data-title="Azuki bean" data-description="Swiss chard pumpkin bunya nuts maize plantain aubergine napa cabbage soko coriander sweet pepper water spinach winter purslane shallot tigernut lentil beetroot.">
<img src="images/img2.jpg" alt="img01"/>
</a>
</li>

а вот сам js - https://p.w3layouts.com/demos/photo_cart/web/js/grid.js

Меня интересует вот этот кусок

Preview.prototype = {

create : function() {
// create Preview structure:
this.$title = $( '<h3> </h3>' );
this.$description = $( '<p></p>' );
this.$href = $( '<p class="read-more"><a href="details.html">Read More</a></p>' );
this.$details = $( '<div class="og-details"></div>' ).append( this.$title, this.$description, this.$href );
this.$loading = $( '<div class="og-loading"></div>' );
this.$fullimage = $( '<div class="og-fullimg"></div>' ).append( this.$loading );
this.$closePreview = $( '<span class="og-close"></span>' );
this.$previewInner = $( '<div class="og-expander-inner"></div>' ).append( this.$closePreview, this.$fullimage, this.$details );
this.$previewEl = $( '<div class="og-expander"></div>' ).append( this.$previewInner );
// append preview element to the item
this.$item.append( this.getEl() );
// set the transitions for the preview and the item
if( support ) {
this.setTransition();
}

Как в строке this.$href = $( '<p class="read-more"><a href="details.html">Read More</a></p>' ); Задать вместо ссылки details.html ссылку на полноразмерную картинку?

kimsufi.com ( https://www.kimsufi.com ) очень дешевые и качественные дедики https://clck.ru/gvF9p - антибот, использую уже 3 года.
D.iK.iJ
На сайте с 26.05.2013
Offline
225
#1

Берете ссылку из data-largesrc (как я понимаю, $fullimage) и вставляете куда нужно.

Там же вроде все просто. У картинки указаны data- параметры и на основе них формируется открывающийся блок. Можно не разбираться с их кодом, а быстрее свой написать. :)

Адаптивный дизайн в 2 строчки ( https://dikij.com/wm/adaptaciya-saytov.php ). + Принимаю заказы любой сложности ( https://searchengines.guru/ru/forum/926323 ). 💎 Еще я делаю классные кулоны с опалами ( https://mosaicopal.ru/ ).

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий