Joomla Templates Club 406,261 posts

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#202011

Hi,
I’m trying to get Magnific Popup to work in JA-Biz the same as it works in JA-Decor…
I’ve added into the templateHelper to create the image gallery in K2 items:

public static function photogallery($introtext){
if(preg_match_all('#<img[^>]+>#iU', $introtext, $imgs)){
//remove the text
$introtext = preg_replace('#<img[^>]+>#iU', '', $introtext);
//collect all images
$img_data = array();
// parse image attributes
foreach( $imgs[0] as $img_tag){
$img_data[$img_tag] = JUtility::parseAttributes($img_tag);
}
$total = count($img_data);

if($total > 0) :
$introtext .= '<ul class="itemthumbnails'.($total>1?'':' no-slide').'">';
$j = 0;
foreach ($img_data as $img => $attr) :
$introtext .= '<li class="'.($j == 0 ? 'col-xs-12' : 'col-sm-6 col-xs-12').'">'
.($total>1?'<a title="'.$attr['alt'].'" href="'.(isset($attr['src']) ? $attr['src'] : '').'" class="itemthumbnail'.($j == 0 ? ' active' : '').'">':'')
.$img
.($total>1?'</a>':'').
'</li>';
$j++;
endforeach;
$introtext .= '</ul>';
endif;

return $introtext;
} else {
return $introtext;
}
}


And I’ve also added the jquery.magnific-popup.js and jquery.magnific-popup.min.js into the template JS folder, and I’ve added this into head.php:

<script>
$(document).ready(function() {
// Thumbnail gallery
if($('.itemthumbnails').length >0 && !$('.itemthumbnails').hasClass('no-slide')){
$('.itemthumbnails').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
}
});
</script>


but it’s not working… I can’t for the life of me see what I’m missing… Example page here…

Does the ‘image’ type support PNGs as well as JPGs?

Cheers,
Matt

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#552679

Hi Matt,

You can add the below code to the file root/templates/ja_biz/js/scripts.js

(function($){
$(document).ready(function() {

if($('.itemthumbnails').length >0 && !$('.itemthumbnails').hasClass('no-slide')){
$('.itemthumbnails').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
}

});
})(jQuery);

You may need to clear browser cache to see the change

Best regards

1 user says Thank You to Eragon H for this useful post

1. matgray87

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#552756

Perfect – works great… What was I doing wrong then, and why is it different adding it into scripts.js as opposed to the head.php file as the code is identical?
Cheers,
Matt

[Eragon H Friend Eragon HJoin date: July 2014Posts: 468Downloads:1Uploads:39 Thanks: 5 Thanked: 156 times in 149 posts]

#552838

Hi Matt,

1. It’s nice to know my suggestion helped.

2. If you add this code to the head.php, it still work

<script>
(function($){
$(document).ready(function() {

if($('.itemthumbnails').length >0 && !$('.itemthumbnails').hasClass('no-slide')){
$('.itemthumbnails').magnificPopup({
delegate: 'a',
type: 'image',
tLoading: 'Loading image #%curr%...',
mainClass: 'mfp-img-mobile',
gallery: {
enabled: true,
navigateByImgClick: true,
preload: [0,1]
},
image: {
tError: '<a href="%url%">The image #%curr%</a> could not be loaded.',
titleSrc: function(item) {
return item.el.attr('title');
}
}
});
}
});
})(jQuery);
</script>

3. I suggested to add to the file scripts.js because it’s easier to control and maintain.

Best regards.

1 user says Thank You to Eragon H for this useful post

1. matgray87

[matgray87 Friend matgray87Join date: November 2011Posts: 159Downloads:0Uploads:17 Thanks: 33 Thanked: 8 times in 1 posts]

#552903

Thanks… seems I did that, but just missed off ‘})(jQuery);’ at the end. ****… so close!
Thanks again

[Author]

Posts