I am using photoswipe in my mobile web site and want to show a css sprite as a like button on top of a picture.

This leads to the following error upon click:

psw,psw-ui,psw-custom,v1.0.0.min.js:13 Uncaught TypeError: Cannot read property 'split' of null
at psw,psw-ui,psw-custom,v1.0.0.min.js:13
at d (psw,psw-ui,psw-custom,v1.0.0.min.js:13)
at HTMLDivElement.t (psw,psw-ui,psw-custom,v1.0.0.min.js:13)

Somehow photo swipe tries to get the size data in this line:

size = el.getAttribute('data-size').split('x');

But there is no data-size attribute on my likebutton.

The only solution I saw until now is to move the likebutton div outside the gallery div, but this brings positioning problems as the main image is not always at the same hight position.

<span id="tese1064335" class="nhrt" style="top: 188px;right:15px;">
   <a href="#" data-ajax="false" onclick="edit_notepad(1064335, 1);return false;" rel="nofollow" title="Diese Anzeige in Ihrem Merkzettel speichern" class="sprites-1 ui-link sprite-IC_hrt_1"></a>
</span>

// gallery:

<div id="demo-test-gallery" class="demo-gallery" itemscope="" itemtype="http://schema.org/ImageGallery">
   <div id="cl_gallery" data-pswp-uid="1"><a href="http://static.test0.jpg" data-size="900x1200" data-med="http://static.test0.jpg" data-med-size="1006x1006" data-details="test" class="demo-gallery__img--main ui-link">

   <img src="http://static.test0.jpg" alt="" width="1006" height="1006"><figure>test </figure></a>
</div>

How can I position the like button into that div so it will be positioned within the other div without interfearing with photoswipe?

0 Answers