Magento Forums
Help
cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

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

SOLVED
Go to solution
‎12-14-2015 12:06 AM
‎12-14-2015 12:06 AM

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

Labels:
0 Kudos
1 ACCEPTED SOLUTION

Accepted Solutions
‎02-25-2016 09:56 AM
‎02-25-2016 09:56 AM

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

Find myself

View solution in original post

3 REPLIES 3
‎02-25-2016 09:56 AM
‎02-25-2016 09:56 AM

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

Find myself

‎04-28-2016 11:08 PM
‎04-28-2016 11:08 PM

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

Could you share your solution with us?

0 Kudos
‎08-05-2016 10:15 AM
‎08-05-2016 10:15 AM

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

0 Kudos