Image on product page not showing

[frameroom]

Hi,

The theme dev on this, @Landofcoder , has gone ghost again on support of this after they said they were in their fixing it, so I'm hoping someone here can help.

Straightforward issue. Visit http://m2.vulcansrest.com/socknado-naked-orchid.html and you'll see the arrows in the place of the product image. The image in present for this product and marked base, thumb, and swatch. There is an error in inspector of:

Uncaught TypeError: settings.$elementF.fotorama is not a function
at UiClass.initGallery (gallery.js:297)
at UiClass.initialize (gallery.js:139)
at UiClass.initialize (wrapper.js:109)
at UiClass (class.js:49)
at main.js:31
at Object.execCb (require.js:1650)
at Object.context.execCb (resolver.js:145)
at Module.check (require.js:866)
at Module.<anonymous> (require.js:1113)
at require.js:132

They asked me first to replace jquery.zoom.min.js  with a new version then run:

hp bin/magento setup:upgrade

php bin/magento setup:static-content:deploy -f

php bin/magento cache:clean

I did this on both the theme and the child theme, which I am running.

They then asked me to replace gallery.phtml with a new version they provided, then clear cache. I did this on both theme and child. Still same issue.

Any clue on how to fix this?

Thanks in advance!

[Nishu Jindal]

Hi @frameroom,

Can you please try below change in your theme file app/design/frontend/[vendor]/ [theme_name]/requirejs-config.js

var config = {    shim: {
        'fotorama/fotorama': {            deps: ['jquery']
        }
    }
};

After adding the changes , run below commands

1. rm -rf var/cache/* generated/* var/page_cache/* pub/static/frontend/*

2. php bin/magento setup:upgrade

3. php bin/magento s:s:d -f

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

[frameroom]

Hi @Nishu Jindal and thanks for that advise.

I do not see the requirejs-config.js in /app/design/frontend/Venustheme/floristry or /floristry_child I did a search for it as well. Filezilla didn't find it in any directory either.

Do I need to create it?

Thanks.

[gaurav_harsh1]

@frameroom 

There is one JS gallery.js, in line 297(or just search in whole project) remove this code :

settings.$elementF.fotorama(config);

after removing, run below commands :

php bin/magento setup:static-content:deploy -f
php bin/magento cache:flush

[Bhanu Periwal]

Hi @frameroom 

You can try below solutions for  your issue:

Reason 1: You have wrong permissions on your /media/ folder

Solution: Ensure you have writable permissions on this folder. Change permissions to 777 recursively. You can do it using SSH via this command (execute it in Magento directory):

chmod -R 777 media/

Reason 2: Media folder is owned by another user. It can happen if you transfer your Magento store from one server to another

Solution: Change ownership of the /media/ folder:

chown -R {username}:{username} media/

Important: Make sure that folder owner is the same user as your web server user. If you are not sure, contact your server support administrator.

Reason 3: Magento cannot resize images due low PHP memory limit. Magento resize images using GD library, however if there is no sufficient amount of memory for such operation Magento will return a placeholder image

Solution: Increase your memory limit. You should open your .htaccess file and find this string:

php_value memory_limit 256M
Make sure that this value is at least 256M, or better 512M.

It may help you.
Problem Solved? Click on 'Kudos' & Accept as Solution!

[Nishu Jindal]

Hi @frameroom,

If you do not have this file, then please try to create this file and add the given code.

Run the commands as mentioned in previous post.

Hope this helps you!

Problem Solved! Click Kudos & Accept as Solution!

[frameroom]

Hi @Nishu Jindal and @Bhanu Periwal 

Thanks for your replies. Unfortunately, they didn't work.

So far I have tried:

1. Uploading the gallery.phtml that @Landofcoder provide 2 different times and asked me to upload twice. Neither one worked.
2. I removed the code at line 297 referencing fotorama in lib/web/mage/gallery/gallery.js 
   1. This is the file I am 99% sure is the functioning gallery.js.
   2. The other gallery.js that had the same fotorama code at line 297 was located at vendor/magento/magento2-base/lib/web/mage/gallery/gallery.js. When I made the changes in this file and ran the appropriate commands, it changed nothing, and that's why I am fairly certain the lib/web/mage/gallery/gallery.js is the file in control here.
   3. When made the change at 297, it then gave me this error in Console at line 490:
      1. gallery.js:460 Uncaught TypeError: Cannot read property 'setOptions' of null
             at Object.updateOptions (gallery.js:460)     at Object.exit (gallery.js:355)     at mqChange (matchMedia.js:133)     at window.mediaCheck (matchMedia.js:143)     at gallery.js:322     at Function.m.each.m.forEach (underscore.js:153)     at UiClass.setupBreakpoints (gallery.js:321)     at UiClass.initialize (gallery.js:141)     at UiClass.initialize (wrapper.js:109)     at UiClass (class.js:49)

I went down this rabbit hole, removing more and more of the code at the lines in question above, and it kept throwing critical errors associated with fotorama (I'm pretty sure it's the culprit), and I'm stuck again. I tried removing the next lines it stated were the issues, but it just led to more issues.

I restored everything back to the original error state at this point, except the updated gallery.phtml pages.

Do you have any more ideas?

Thanks again!

[Nishu Jindal]

Hi @frameroom,

Can you try check on your page whether one or more jquery with different versions are loaded.

It may be different jquery versions are conflicting with fotorama.

Hope this helps you!

Problem Solved! Click Kudos & Accspt as Solution!

[frameroom]

Thanks for reply. @Nishu Jindal 

When I view page source I am seeing 6 .js files loaded, and none are the same. I'm not missing anything am I?

[Nishu Jindal]

Hi @frameroom,

Instead of page source, can you check loaded js using developer console f12 and then in network tab select js and reload the page. 

Hope you will get the list of js loading on the page. Please share the screenshot as well.

Thanks!