[solved] Disable SqueezeBox popup on Product images in mobil version

  • Posts: 136
  • Thank you received: 7
7 years 6 months ago #281868

-- HikaShop version -- : 3.2.1
-- Joomla version -- : 3.8.1
-- PHP version -- : 7.0.10
-- Browser(s) name and version -- : all
-- Error-message(debug-mod must be tuned on) -- : none

Hi

Is there a way to disable SqueezeBox popup on Product images on mobile devices?

onclick="SqueezeBox.fromElement(this,{parse:'data-rel'});return false;"

It's not working very well in my template design. It seems to me that it comes from the /product/view.html.php and I would prefer not to edit this file.

On mobile devices I would prefer that changing the 'hikashop_main_image_div' and 'hikashop_small_image_div' would trigger 'onclick' but not at the same time open the 'sbox-overlay' and 'sbox-window' 'div'.
I could CSS 'display:none' to these two 'div', but how would that effect other places of Hikashop?

Best regards,
Henrik

.ninja { color: black; visibility: hidden; }
In case of fire:
1. git commit
2. git push
3. exit building
Last edit: 7 years 5 months ago by flexsus. Reason: solved

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
7 years 6 months ago #281869

Hello,

HikaShop do not provide a different content depending the browser/device.
So I would rather commend you do use another image popup system, like shadowbox.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 136
  • Thank you received: 7
7 years 6 months ago #281932

Hi Jerome

The 'onmouseover' in file /product/show_block_img.php is working well in Desktop browser. And whether you use mootools or shadowbox it is just a matter of visual style. Both works well.

$attr = 'title="'.$this->escape(@$image->file_description).'" onmouseover="return window.localPage.changeImage(this, \'hikashop_main_image'.$variant_name.'\', \''.$img->url.'\', '.$img->width.', '.$img->height.', \''.str_replace("'","\'",@$image->file_description).'\', \''.str_replace("'","\'",@$image->file_name).'\');"';

But on touch devices, the 'onmouseover' has no effect. So I'm trying to figure out a way to override the view or the javascript, so that on mobile devices, the 'onclick' or 'rel' for images inside the 'hikashop_small_image_div' would only change the 'hikashop_product_main_div' image. An only if click/touch on the main image, this would load popup image, mootools or shadowbox.

But for now, I agree that ShodowBox works better in mobile devices. So I will use this for now, but will keep looking for a better solution on mobile devices.

Regards,
Henrik

.ninja { color: black; visibility: hidden; }
In case of fire:
1. git commit
2. git push
3. exit building

Please Log in or Create an account to join the conversation.

  • Posts: 26232
  • Thank you received: 4035
  • MODERATOR
7 years 6 months ago #281934

Hello,

So you can see to write some JS script which will do its job only if the browser support "touch".
But, as you will understand, it is beyond the limit of our support since it's really advanced customization.

Regards,

Jerome - Obsidev.com
HikaMarket & HikaSerial developer / HikaShop core dev team.

Also helping the HikaShop support team when having some time or couldn't sleep.
By the way, do not send me private message, use the "contact us" form instead.

Please Log in or Create an account to join the conversation.

  • Posts: 136
  • Thank you received: 7
7 years 5 months ago #283098

Hi Jerome

I managed to make this work with my Gavick template. One mobile devices when clicking on the thumbnails, it actually changed the large image to the clicked thumbnail. And with this code in my default Gavick template:

	<script type="text/javascript">
		if(window.getSize().x < 480) {
			jQuery(document).ready(function(){
	   			jQuery('#sbox-overlay').addClass('nomobile');	   			
	   			jQuery('#sbox-window').addClass('nomobile');
			});
		}
	</script>
the mootools div #sbox-overlay and #sbox-window is added CSS class: display: none!important from my mobile.css file.
Only thing left was to add override the 'body-overlayed' that mootools add to the body-tag:
/* Don't hide the scrollbars. Fix problem with Hikashop thumbnails #sbox-window and #sbox-overlay with class .nomobile. */
.body-overlayed { overflow: auto!important; }
to keep the scrolling still enabled.

Working perfect now!

Best regards,
Henrik

.ninja { color: black; visibility: hidden; }
In case of fire:
1. git commit
2. git push
3. exit building
Last edit: 7 years 5 months ago by flexsus.
The following user(s) said Thank You: nicolas

Please Log in or Create an account to join the conversation.

Time to create page: 0.058 seconds
Powered by Kunena Forum