cancel
Showing results for 
Search instead for 
Did you mean: 

Question : import product gallery (fotorama) to my custom module

SOLVED
   Did you know you can see the translated content as per your choice?

Translation is in progress. Please check again after few minutes.

Question : import product gallery (fotorama) to my custom module

Hi!

I need to add the same gallery on my custom module
But, I don't know how import all js/css and html and I don't find any idea to resolve my problem :/

Anybody to help me please ?

Thank you

1 ACCEPTED SOLUTION

Accepted Solutions

Re: Question : import product gallery (fotorama) to my custom module

3 REPLIES 3

Re: Question : import product gallery (fotorama) to my custom module

Find myself

Re: Question : import product gallery (fotorama) to my custom module

Could you share your solution with us?

Re: Question : import product gallery (fotorama) to my custom module

I found a way to add the fotorama gallery to any page in Magento 2. 

 

The set up code fotorama provides is this: 

 

<!-- 1. Link to jQuery (1.8 or later), -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <!-- 33 KB -->

<!-- fotorama.css & fotorama.js. -->
<link href="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" rel="stylesheet"> <!-- 3 KB -->
<script src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script> <!-- 16 KB -->

<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama">
<img src="http://s.fotorama.io/1.jpg">
<img src="http://s.fotorama.io/2.jpg">
</div>

 

When you add this code to the content of a cms page or block, it doesn't accept the external link to their css and changes to this:

 

<!-- 1. Link to jQuery (1.8 or later), -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- 33 KB -->
<p>&nbsp;</p>
<!-- fotorama.css & fotorama.js. -->
<p>&nbsp;</p>
<!-- 3 KB -->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.js"></script>
<!-- 16 KB -->
<p>&nbsp;</p>
<!-- 2. Add images to <div class="fotorama"></div>. -->
<div class="fotorama"><img src="http://s.fotorama.io/1.jpg" alt="" /> <img src="http://s.fotorama.io/2.jpg" alt="" /></div>

 

 

What i did was add the external link in my default.xml to /app/design/frontend/<Vendor>/<Theme>/Magento_Theme/layout like this:

 

<?xml version="1.0"?>
<page layout="3columns" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
<head>
<link src="http://cdnjs.cloudflare.com/ajax/libs/fotorama/4.6.4/fotorama.css" src_type="url" rel="stylesheet" />
</head>
<body>
</body>
</page>

 

You need to change the "link href" to "link src" and when adding external resources, specifying the src_type="url" argument value is a must.

On my CMS page, I added the fotorama setup code in HTML without the "link href" line for css and it worked perfectly. 

 

Hope this helps Smiley Happy