Hi, I created a custom gallery for my portfolio and have been very happy with it for the past year or two. However, I later added an option to improve how the galleries display on mobile devices. Instead of the standard slideshow, I wanted smaller screens to simply display all of the images vertically down the page.
At a certain screen size, the menu moves from the left side to the top of the screen and the slideshow takes up the whole page, now centered (which is what I want). However, I need the slideshow itself to “expand” vertically, stacking the images at the same screen size where the menu moves, but functioning as a normal slideshow at larger screen sizes.
The solution that someone came up with a while back was to add the following js code, to make the slideshow adapt specifically to touch devices. But I’ve just noticed that on browsers like Chrome and Opera (webkit, I suppose?) that code is messing up the standard slideshow display and vertically stacking the images at all screen sizes, touch screen or not, which results in part of the images being under the lefthand menu.
What I would prefer is to eliminate the “identify touch device” aspect altogether and simply have a conditional piece of code that stacks the images for any screen size of 1024 px or less, since that’s the size where the responsive menu kicks in. So if someone has their browser resized to be a smaller window, the responsive version of the menu kicks in, and ideally the stacked version of the slideshow should too.
As an example, here is one gallery. If you view it on a normal computer screen in a browser like Firefox, it will look fine (large image to the right of the menu, with the ability to click through the slides via hover controls). If you view it on your phone or tablet, it should look fine as well, with the photos all stacked vertically under a horizontal menu on the top. But if you view it in a browser like Chrome, you can see the problem.
This is the js being used, and below that, the slideshow CSS. I can’t figure out why the touch_device script is affecting how it displays in Chrome on a normal computer, but as I said, it would actually be best to just use the responsive vertical version for all screen sizes of 1024 px or smaller. I have no idea how to do that with a media query though!
<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' ); ?>
jQuery.noConflict();
jQuery(function(jQuery) {
var myslides = [
<?php $comma = FALSE; ?>
<?php
foreach($listofimages as $item){
if($comma) { echo ','; }
$comma = TRUE;
echo $item;
}
?>
];
var arrim = [];
for (var i = 0; i < myslides.length; i++) {
arrim[i] = new Image();
arrim[i].src = myslides[i].image;
}
function is_touch_device() {
return 'ontouchstart' in window // works on most browsers
|| navigator.maxTouchPoints; // works on IE10/11 and Surface
};
if (is_touch_device()) {
jQuery("#supersized-loader").hide();
jQuery("#supersized").hide();
jQuery("#column-content").hide();
jQuery("div.website-footer").before('<div id="imgcontainer"></div>');
for (var i = 0; i < myslides.length; i++) {
var im = jQuery('<img class="images" src="' + myslides[i].image + '">');
jQuery("#imgcontainer").append(im);
}
} else {
jQuery.supersized({
slideshow: <?php echo $slideshow ; ?>,
autoplay: 0,
start_slide: 1,
stop_loop: <?php echo $stop_loop ; ?>,
random: 0,
slide_interval: <?php echo $slide_interval ; ?>,
transition: <?php echo $transition ; ?>,
transition_speed: <?php echo $transition_speed ; ?>,
pause_hover: 1,
keyboard_nav: 1,
performance: <?php echo $performance ; ?>,
image_protect: <?php echo $image_protect ; ?>,
show_thumb: <?php if ($random =='1' ) { echo('0'); } else { echo $show_thumb ; } ?>,
image_path: '<?php echo JURI::base(); ?>templates/full_screen_6/images/supersized/',
fit_always: <?php echo $fit_always ; ?>,
fit_portrait: <?php echo $fit_portrait ; ?>,
fit_landscape: <?php echo $fit_landscape ; ?>,
min_width: <?php echo $min_width ; ?>,
min_height: <?php echo $min_height ; ?>,
vertical_center: <?php echo $vertical_center ; ?>,
horizontal_center: <?php echo $horizontal_center ; ?>,
slides: myslides
});
}
});
/** supersize **/
#supersized-loader {
position:absolute;
top:65%;
left:50%;
z-index:0;
width:60px;
height:60px;
margin:-30px 0 0 -30px;
text-indent:-999em;
background:url(../../../images/supersized/progress.gif) no-repeat center center;
}
#supersized {
bottom: 0;
height: 100%;
left: 285px; /* same distance as left menu width */
overflow: hidden;
position: fixed;
right: 0; /* use instead of width 100% - will go no further than right edge of browser window */
top: 0;
/*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/
z-index: 1;
}
.images {margin: 1px 0 4px 0;}
@media screen and (max-width: 1024px) {
#supersized {
position:fixed;
left:0;
top:0;
overflow:hidden;
z-index: 1;
height:100%;
width: 100%;
}
}
#supersized img {
width:auto;
height:auto;
position:relative;
max-width : none;
display:none;
outline:none;
border:none;
}
/*Quality*/
#supersized a {
background: none repeat scroll 0 0 #111;
display: block;
height: 100%;
left: 285px; /* same distance as left menu width */
overflow: hidden;
position: fixed;
right: 0; /* use instead of width 100% - will go no further than right edge of browser window */
top: 0;
/*width: 100%; removed by dsonesuk using 100% with left 285px will make width 100% + 285px;*/
z-index: -30;
}
@media screen and (max-width: 1024px) {
#supersized a {
z-index:-30;
position:fixed;
overflow:hidden;
top:0; left:0;
width:100%;
height:100%;
background:#111;
display:block;
}
}
#supersized a.prevslide {
z-index: -20;
}
#supersized a.activeslide {
z-index:-10;
}
#supersized a.image-loading {
background:#111 url(../../../images/supersized/progress.gif) no-repeat center center;
width:100%;
height:100%;
}
#supersized a.prevslide img, #supersized a.activeslide img {
display:inline;
}
/** Prev / Next slide **/
#prevslide, #nextslide {
position:absolute;
z-index:60;
overflow: hidden;
width: 25%;
height: 100%;
top: 0;
opacity: .5;
}
#nextslide {
left: 75%;
cursor: url('img/forward.png'), move;
}
#prevslide {
left: 285px;
cursor: url('img/back.png'), move;
}
@media screen and (max-width: 1024px) {
#prevslide {
left: 0;
cursor: url('img/back.png'), move;
}
}