javascript - Fotorama jQuery Image Gallery Not loading to full size

Question

Welcome To Ask or Share your Answers For Others

javascript - Fotorama jQuery Image Gallery Not loading to full size

posted Feb 19, 2021 in Technique[技术] by 深蓝 (71.8m points)

javascript - 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

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-02-19T04:03:42+0000

@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>

Categories

javascript - Fotorama jQuery Image Gallery Not loading to full size

javascript - Fotorama jQuery Image Gallery Not loading to full size

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags