# Disable modal when clickin detail page image **URL:** \ **Category:** International (English Only)\ **Tags:** general\ **Created:** [12. Dezember 2017 um 17:14 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984 "2017-12-12T17:14:39Z")\ **Posts on this page:** 6\ **Page:** 1
**Author:** ![Daniel\_S1](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Daniel\_S1](https://forum.shopware.com/u/Daniel_S1)\ **Post date:** [12. Dezember 2017 um 17:14 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/1 "2017-12-12T17:14:39Z")
Hi everyone, I am trying to disable the modal displayed when you click on the detail page image, I just need to remove that function completly, I found the jquery.image-gallery.js which handle that funcionality onclick event. So my question if there’s a way to disable it? is there an option for the onclick event to pass and deactivate it? or should I just remove that piece of code? by CSS display: none is an option but is the best? Thanks in advance.   ``` /** * Will be called when the detail page image slider was clicked.. * Opens the lightbox with an image slider clone in it. * * @event onClick */ onClick: function (event) { var me = this, imageSlider = me.$el.data('plugin_swImageSlider'); $.modal.open(me.$template || (me.$template = me.createTemplate()), { width: '100%', height: '100%', animationSpeed: 350, additionalClass: 'image-gallery--modal no--border-radius', onClose: me.onCloseModal.bind(me) }); me._on(me.$zoomInBtn, 'click touchstart', $.proxy(me.onZoomIn, me)); me._on(me.$zoomOutBtn, 'click touchstart', $.proxy(me.onZoomOut, me)); me._on(me.$zoomResetBtn, 'click touchstart', $.proxy(me.onResetZoom, me)); picturefill(); me.$template.swImageSlider({ dotNavigation: false, swipeToSlide: true, pinchToZoom: true, doubleTap: true, maxZoom: me.opts.maxZoom, startIndex: imageSlider ? imageSlider.getIndex() : 0, preventScrolling: true }); me.toggleButtons(me.getImageSlider()); $.publish('plugin/swImageGallery/onClick', [me, event]); } ```   ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [12. Dezember 2017 um 17:29 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/2 "2017-12-12T17:29:24Z")
Hi Daniel, you could just remove the swImageGallery plugin entirely from the product detail page: window.StateManager.removePlugin(’\*[data-image-gallery=„true“]’, ‚swImageGallery‘) You have to call this method after the registration of the plugin here [shopware/jquery.shopware-responsive.js at 5.3 · shopware/shopware · GitHub](https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L93) . The removePlugin-method is documented here: [jQuery plugins and the StateManager](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#class-methods-0) Best way to call it is by include your js file as described here - for Plugins: [Plugin quick Startup Guide](https://developers.shopware.com/developers-guide/plugin-quick-start/#frontend-resources-auto-registration) - for Themes: [Using CSS and JavaScript in themes](https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files) Regards ---
**Author:** ![Daniel\_S1](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Daniel\_S1](https://forum.shopware.com/u/Daniel_S1)\ **Post date:** [12. Dezember 2017 um 23:36 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/3 "2017-12-12T23:36:31Z")
> [@simkli schrieb:](https://forum.shopware.com/profile/16741/simkli "simkli") > > Hi Daniel, > you could just remove the swImageGallery plugin entirely from the product detail page: > window.StateManager.removePlugin(‚\*[data-image-gallery=„true“]‘, ‚swImageGallery‘) > > You have to call this method after the registration of the plugin here [https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/\_public/src/js/jquery.shopware-responsive.js#L93](https://github.com/shopware/shopware/blob/5.3/themes/Frontend/Responsive/frontend/_public/src/js/jquery.shopware-responsive.js#L93) . > The removePlugin-method is documented here: [https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/#class-methods-0](https://developers.shopware.com/designers-guide/javascript-statemanager-and-pluginbase/?&_ga=2.98369309.34560799.1513016079-888930252.1511453235#class-methods-0) > > Best way to call it is by include your js file as described here > > - for Plugins: [https://developers.shopware.com/developers-guide/plugin-quick-start/#frontend-resources-auto-registration](https://developers.shopware.com/developers-guide/plugin-quick-start/#frontend-resources-auto-registration) > - for Themes: [https://developers.shopware.com/designers-guide/css-and-js-files-usage/#add-javascript-files](https://developers.shopware.com/designers-guide/css-and-js-files-usage/?&_ga=2.98369309.34560799.1513016079-888930252.1511453235#add-javascript-files) > > Regards Hi Simkli, thanks for helping. I am new in shopware so I hope I followed your instructions correctly. 1 - What I did first was to add the line of code you said just right below the code to register a method so the code looks like this so far: ``` // jquery.shopware-responsive.js //... more code above .addPlugin('*[data-image-gallery="true"]', 'swImageGallery') .removePlugin('*[data-image-gallery="true"]', 'swImageGallery') //... more code bellow ``` 2 - Then that file I uploaded it into **src \> js** from my **custom theme.** 3 - Then edited the Theme.php file from my custom theme to add that jquery.shopware-responsive.js file, so now it looks like this so far: ``` protected $javascript = array( 'src/js/another_file.js', 'src/js/jquery.shopware-responsive.js' /*added this one*/ ); ``` 4 - Finally, I cleared the cache and reloaded the page, but still can see the modal showing up. Did I do something wrong? ---
**Author:** ![Daniel\_S1](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Daniel\_S1](https://forum.shopware.com/u/Daniel_S1)\ **Post date:** [14. Dezember 2017 um 16:57 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/4 "2017-12-14T16:57:25Z")
Any clue about it? ---
**Author:** ![simkli](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/simkli/32/13124_2.png) [@simkli](https://forum.shopware.com/u/simkli)\ **Post date:** [14. Dezember 2017 um 19:22 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/5 "2017-12-14T19:22:49Z")
Hi Daniel, 1. do not modify any Shopware files. That is bad practice and you’ll loose your changes after an update 2. do not copy any Shopware files 1:1 into your theme/plugin. That’s also bad practice. You should only add modifications into your theme/plugin. When a Shopware update is released the original files could be changed. If you copy them 1:1 into your theme/plugin the updated original files will be overriden with the old ones by your plugin. This can lead to sideeffects.  > 1 - What I did first was to add the line of code you said just right below the code to register a method so the code looks like this so far: Undo that. That’s not the way I told you. Please reread my post. You should just call this function in an empty js file which will be registered in your plugin /theme.   Maybe you can send a link to your shop and provide some details about your setup (theme/plugins). Best regards ---
**Author:** ![Daniel\_S1](https://avatars.discourse-cdn.com/v4/letter/d/e56c9b/32.png) [@Daniel\_S1](https://forum.shopware.com/u/Daniel_S1)\ **Post date:** [14. Dezember 2017 um 19:27 UTC](https://forum.shopware.com/t/disable-modal-when-clickin-detail-page-image/49984/6 "2017-12-14T19:27:15Z")
I finally made it work, as you said I had to create a custom JS file, added it and before the domready I had to write: ``` window.StateManager.removePlugin('*[data-image-gallery="true"]', 'swImageGallery'); ``` Thanks for your help.