Where to add code to custom gallery shortcode - php

Question

I'm using the information here http://ieg.wnet.org/2016/02/replacing-default-wordpress-gallery-shortcode/ as the basis for a custom gallery shortcode, and trying to create this carousel slider https://www.jssor.com/demos/image-gallery.slider. Problem is I don't know how exactly to implement it.
The images and everything up until then shows in the source code, but then nothing after it.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
}
return $gallery;
?>
</div>
It's probably something simple, this is just far past my base of knowledge when it comes to this.

Answer 1

You are returning the value instead of printing it to the web page. Use echo instead of return. Also make sure you echo it in each iteration of the loop so you don't just print one image, but all of them.
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:800px;height:356px;overflow:hidden;">
<?php
foreach ( $images as $image ) {
$thumbnail = wp_get_attachment_image_src($image->ID, 'homepage-thumb');
$thumbnail = $thumbnail[0];
$fullsize = wp_get_attachment_image_src($image->ID, 'service-page');
$fullsize = $fullsize[0];
$gallery .= "<div><img data-u='image' src='".$thumbnail."'><img data-u='thumb' src='".$fullsize."'></div>";
echo $gallery;
}
?>
</div>