CODEWITHSUNDEEP
javascripthtmljquerycssfotorama
shimmyshimmywah
shimmyshimmywah

Reputation: 11

Fotorama jQuery Image Gallery Not loading to full size

I have embedded a jQuery Image Gallery with Fotorama on the below page. When it loads on a new browser the first time the image will load 96x64 pixels (may not be a hard rule, but just took a one off measurement for dimensions). If the same browser reloads the page, then the image will load properly and to its required size. There are thumbnails underneath and these load fine both times (64x64px squares)

The page it is being built on is a Clickfunnels page. The issue is on desktop and mobile, it is also on all browsers (tested Chrome, Edge and Safari). Here is the website link: https://www.sehjra.com/test-me

I need the main image to load to its required size the first time as the customer will not know to refresh the page and will think it is broken.

I have embedded the below in the footer:

<!-- Fotorama from CDNJS, 19 KB -->
<link  
href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" 
rel="stylesheet">
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"> 
</script>

I have embedded the below in the body where I want the images to render:

<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
  data-nav="thumbs"
  data-loop="true">
   <a href="https://images.clickfunnels.com/75/5f7faccfac43bb82f07bc207f4ecdb/_12A0017.jpg"><img 
src="https://images.clickfunnels.com/c9/175041297a4c9a88aad08820614ef6/_12A0017.jpg"></a>
  <a href="https://images.clickfunnels.com/aa/b8cfd269914ebf93037a9f8776f5f6/_12A0064.jpg"><img 
src="https://images.clickfunnels.com/f3/adf5f4d8f34f9cb2166e0d9e5f71f0/_12A0064.jpg"></a>
  <a href="https://images.clickfunnels.com/ba/efaf8f7f204a9587113f70ced4030e/_12A0062.jpg"><img 
src="https://images.clickfunnels.com/a4/848dfbfe4a4dc8bda505ec1300b5cd/_12A0062.jpg"></a>
  <a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
    <a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>  <a 
href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
</div

Upvotes: 1

Views: 953

Answers (2)

El Vitto
El Vitto

Reputation: 1

I have the solution, you need to remove the async from the links. async causes some troubles here. an script expect something which is not loaded currently thus when you refresh the page again, the cache of browser returns the cache file and everything works smoothly. if it does not get corrected by removing the async keyword, I gonna need the source code to evaluate accurately. I have found you in Upwork(I did not apply for project). "Johnson321"

Upvotes: 0

George Wang
George Wang

Reputation: 451

@shimmyshimmywah, I tried your code and found it you can do it with simply adding data-fit (cover or contain). Please check the example below.

https://jsbin.com/bovukav/edit?html,output

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  
  <!-- jQuery 1.8 or later, 33 KB -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<!-- Fotorama from CDNJS, 19 KB -->
<link  href="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
  
</head>
<body>
<h1>Hi, Johnson321</h1>
<!-- Add images to <div class="fotorama"></div> -->
<div class="fotorama"
  data-nav="thumbs"
  data-loop="true" data-fit="cover">
   <a href="https://images.clickfunnels.com/75/5f7faccfac43bb82f07bc207f4ecdb/_12A0017.jpg"><img 
src="https://images.clickfunnels.com/c9/175041297a4c9a88aad08820614ef6/_12A0017.jpg"></a>
  <a href="https://images.clickfunnels.com/aa/b8cfd269914ebf93037a9f8776f5f6/_12A0064.jpg"><img 
src="https://images.clickfunnels.com/f3/adf5f4d8f34f9cb2166e0d9e5f71f0/_12A0064.jpg"></a>
  <a href="https://images.clickfunnels.com/ba/efaf8f7f204a9587113f70ced4030e/_12A0062.jpg"><img 
src="https://images.clickfunnels.com/a4/848dfbfe4a4dc8bda505ec1300b5cd/_12A0062.jpg"></a>
  <a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
    <a href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>  <a 
href="https://images.clickfunnels.com/0e/c39c4e3cea43f7a9fc493a64ce7852/_12A9967.jpg"><img 
src="https://images.clickfunnels.com/d3/c49134578b4c35a410a721b2e8f609/_12A9967.jpg"></a>
</div>
</body>
</html>

Upvotes: 1

Related Questions