Fotorama different list of images for mobile and desktop

Topics related to client-side programming language.
Post questions and answers about JavaScript, Ajax, or jQuery codes and scripts.
mowgli
Posts: 9

Fotorama different list of images for mobile and desktop

How to make a Fotorama different list of images for mobile and for desktop?
For instance: desktop image 1, 2, 3 ... (1400x800) px. Mobile: 1a, 2a,3a .... (480x720).
I read any on Gibbut and Stackoverflow, I even posted a request, but no answers till now.
Admin Posts: 805
Hi,
I think that an easy solution is to make 2 instances of fotorama gallery, one for desktop (id="fotorama_d") and another for mobile (id="fotorama_m"); and use css file according to window's width.
For example:

Code: Select all

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fotorama LightBox Image Gallery</title>
<meta name="description" content="Resource from http://CoursesWeb.net/ , web programming, development courses" />
<script src="jquery.min.js"></script>
<link  href="fotorama.css" rel="stylesheet">
<script src="fotorama.js"></script>
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="fotorama_lightbox_mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="fotorama_lightbox.css" />
<script src="fotorama_lightbox.js"></script>
</head>
<body>

<div class="thumbs">
 <div id="fotorama_d" class="fotorama" data-auto="false" data-thumb-width="70" data-thumb-height="47" data-allow-full-screen="true" data-loop="true" data-nav="dots" data-ratio="1400/800">
  <img src="image_1.jpg" alt="Img 1" width="1200" height="880" />
  <img src="image_2.jpg" alt="Img 2" width="1000" height="720" />
  <img src="image_3.jpg" alt="Img 3" width="1100" height="800" />
 </div>
 <div id="fotorama_m" class="fotorama" data-auto="false" data-thumb-width="50" data-thumb-height="35" data-allow-full-screen="true" data-loop="true" data-nav="dots" data-ratio="720/480">
  <img src="image_1.jpg" alt="Img 1" width="600" height="440" />
  <img src="image_2.jpg" alt="Img 2" width="500" height="360" />
  <img src="image_3.jpg" alt="Img 3" width="550" height="400" />
 </div>
</div>

</body></html>
- In "fotorama_lightbox_mobile.css" add: #fotorama_d { display:none; }.
- In "fotorama_lightbox.css" set: #fotorama_m { display:none; }.

I not tested the code, but maybe it works, or it gives you an ideea.
mowgli Posts: 9
I know it. Was the first thing I thought.
Problem is I have more than 20 hided galleries in any web page. And write so many times double list (or more if I want to make different breakpoints) it will make any page very heavy.
That's why I asked here if there was more simple way.
I already had such problem and I solved it using the "breakpoint js" ( github.com/hasinhayder/BreakPoint ).
It works very fine calling the images via Api.
I never tested this with Fotorama Lightbox. I want to try it. But before I have to understand how to call each Fotorama gallery via Api. :)
Admin Posts: 805
You can use a javascript code to check the browser's width, then, if its width is less than a certain value (450, or other breakpoints), changes the values of: "data-thumb-width", 'data-thumb-height", "data-ratio"; get all the images in ".thumbs .fotorama" and reduces the width and height to half of their size (1/2, or other value).
Here is an example:

Code: Select all

<div class="thumbs">
 <div class="fotorama" data-auto="false" data-thumb-width="70" data-thumb-height="47" data-allow-full-screen="true" data-loop="true" data-nav="dots" data-ratio="1400/800">
  <img src="image_1.jpg" alt="Img 1" width="1200" height="880" />
  <img src="image_2.jpg" alt="Img 2" width="1000" height="720" />
  <img src="image_3.jpg" alt="Img 3" width="1100" height="800" />
 </div>
</div>
<script>
// returns an array with height and width of the window
function getBrowsSize() {
	var brows_size = new Array;
	if (self.innerHeight) {
		brows_size['height'] = self.innerHeight;
		brows_size['width'] = self.innerWidth;
	} else if (document.documentElement && document.documentElement.clientHeight) {
		brows_size['height'] = document.documentElement.clientHeight;
		brows_size['width'] = document.documentElement.Width;
	} else if (document.body) {
		brows_size['height'] = document.body.clientHeight;
		brows_size['width'] = document.body.clientWidth;
	}
	return brows_size;
}
var brows_size = getBrowsSize();    // gets browser's width /height

// if browser width less then 450 px
if(brows_size['width'] < 450) {
  // changes values of : data-thumb-width, data-thumb-height, data-ratio
  var fotor_thu = document.querySelectorAll('.thumbs .fotorama');
  for(var i=0; i<fotor_thu.length; i++) {
    fotor_thu[i].setAttribute('data-thumb-width', 50);
    fotor_thu[i].setAttribute('data-thumb-height', 35);
    fotor_thu[i].setAttribute('data-ratio', '480/720');
  }

  // gets and reduces the width /height of the fotorama images to 1/2
  var fotor_imgs = document.querySelectorAll('.thumbs .fotorama img');
  for(var i=0; i<fotor_imgs.length; i++) {
    fotor_imgs[i].setAttribute('width', fotor_imgs[i].width /2);
    fotor_imgs[i].setAttribute('height', fotor_imgs[i].height /2);
  }
}
</script>
mowgli Posts: 9
That's true, but it will read the full image size (2-300kb) before to shrink it. Changing the image it will read only 50-80 kb. And that's what I want.
Admin Posts: 805
In that case, you can load the images with javascript according to browser width.
Here is an example, for desktop: "img_1", "img_2", "img_3"; and for mobile: "img_1a", "img_2a", "img_3a".

Code: Select all

<div class="thumbs">
  <div id="fotor_1" class="fotorama" data-auto="false" data-thumb-width="70" data-thumb-height="47" data-allow-full-screen="true" data-loop="true">
  <!-- Here will be added the images with javascript -->
  </div>
</div>
<script>
// returns an array with height and width of the window
function getBrowsSize() {
   var brows_size = new Array;
   if (self.innerHeight) {
      brows_size['height'] = self.innerHeight;
      brows_size['width'] = self.innerWidth;
   } else if (document.documentElement && document.documentElement.clientHeight) {
      brows_size['height'] = document.documentElement.clientHeight;
      brows_size['width'] = document.documentElement.Width;
   } else if (document.body) {
      brows_size['height'] = document.body.clientHeight;
      brows_size['width'] = document.body.clientWidth;
   }
   return brows_size;
}
var brows_size = getBrowsSize();    // gets browser's width /height

// array with images addresses
var fotor_imgs = ['img_1', 'img_2', 'img_3'];

// set indice "a" added in images address for mobile
var i_mo = (brows_size['width'] < 450) ? 'a' : '';

// set and add the html with images in #fotor_1
var add_imgs = '';
for(var i=0; i<fotor_imgs.length; i++) {
  add_imgs += '<a href="'+ fotor_imgs[i] + i_mo +'.jpg"><img src="'+ fotor_imgs[i] +'_thumb.jpg"></a>';
}
document.getElementById('fotor_1').innerHTML = add_imgs;
</script>
mowgli Posts: 9
I used this script and it works very well. (By the way, thanks again).

What about if I want make another var for tablet? I tried but I was not able to have 3 variables.

A problem is: if you open the website in a desktop but with window resized (mobile size), the pics opened by fotorama are, of course, in mobile size. If you enlarge the window the pic is very poor. Is there a way to refresh the screen size and reload in this way high resolution pics?

If you are so kind to help me again. Anyway really thanks for everything.
Admin Posts: 805
1. If you want to have, for example:
- for desktop: "img_1", "img_2", "img_3"
- for tablet: "img_1t", "img_2t", "img_3t"
- for mobile: "img_1a", "img_2a", "img_3a"
Replace this code:

Code: Select all

// set indice "a" added in images address for mobile
var i_mo = (brows_size['width'] < 450) ? 'a' : '';
With this one:

Code: Select all

// set indice "a" added in images address for mobile, and "t" for tablet
var i_mo = (brows_size['width'] < 450) ? 'a' : ((brows_size['width'] < 700) ? 't' :'');
- If window width <450, it uses indice "a", if it's between 450 and 700 it uses "t".

2. To refresh the page if window width changes from desktop, or tablet, or mobile device size to another, add this code after the line with "var i_mo".

Code: Select all

// when Resize browser, check window-width; refresh if current device indice not initial device indice
window.addEventListener('resize', function(e){
 var brows_size2 = getBrowsSize();
 var i_mo2 = (brows_size2['width'] < 450) ? 'a' : ((brows_size2['width'] < 700) ? 't' :'');
 if(i_mo2 !== i_mo) window.location.replace(window.location.href);
}, false);
- You can test this code to this page: https://coursesweb.net/javascript/refres ... es-size_cs
mowgli Posts: 9
Thanks again. It works and finally it load in the mobile only the small images (with the css "none" it don't show images, but it download them).
The only little problem is: I'm using fotorama in slideshow mode in home page and when you resize the window the slideshow start again from zero.
In mobile, for instance, when you go in landscape mode it start again from the first picture.
You can see it at: http://www.savoniero.it
Admin Posts: 805
I'm glad it works. I think it is not a problem that the slideshow starts from zero when the page rereshes, and anyway, the visitors not play with the browser to resize the window from a device size to another; and they can easily navigate with the arrows through images.

Similar Topics