Navigation buttons in shadowbox

  • Posts: 80
  • Thank you received: 8
9 years 3 days ago #196107

-- url of the page with the problem -- : luizink-werktuigen.nl/
-- HikaShop version -- : 2.4.0
-- Joomla version -- : 3.4.1
-- PHP version -- : 5.5.20
-- Browser(s) name and version -- : Chrome
-- Error-message(debug-mod must be tuned on) -- : n/a

Hi,

I'm using shadowbox (external) to present my products enlarged. This works great on a normal screen. But in these days touchscreens (tablets and smartphones) are very common. I recently got several complaints that the navigation in the shadowbox is very bad. The navigation buttons and also the close button are too small and/or too close together.
Can this be customizes somehow or is there a good alternative? A shadowbox that would also be swipable would be great.

Any help would be appreciated.

Regards, Benny.

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

  • Posts: 13201
  • Thank you received: 2322
9 years 2 days ago #196113

Hi,

At this time we have Shadowbox or Mootools, Mootools don't have any navigation arrows, and as you said Shadowbox don't seem to be very adapted for touchscreens..

There is no other integrations, but if you have in mind the name of a good extension allowing swipe navigation we could add the integration with this extension on our Todo list.

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

  • Posts: 80
  • Thank you received: 8
9 years 9 hours ago #196495

Hi Xavier,

I did customize the css file plugins/system/shadowbox/shadowbox/examples/build/shadowbox.css in a way that it is easier to navigate on a tablet. On a smartphone however the leftmost button now disappears but that is not an issue for this customer.

Maybe you could do something with Blueimp ( github.com/blueimp/Gallery ).
www.nterwebdesign.nl/extensions/blueimp-lightbox made a plugin with this blueimp lightbox.

This lightbox is responsive and swipable.

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

  • Posts: 81361
  • Thank you received: 13037
  • MODERATOR
8 years 11 months ago #196509

Hi,

We've looked at it and the way it is done, it's not easy to integrate with it for our code structure. We'll see if we can done something we it but it doesn't look good (even though the lightbox system itself looks good).
If you find another lightbox gallery system, let us know. If might be easier to integrate than this one.

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

  • Posts: 80
  • Thank you received: 8
8 years 11 months ago #196596

Nano Gallery ( nanogallery.brisbois.fr/#nanogallery/nan...me/72157647149413477 ) is also a great responsive and touch enabled (slidable) gallery. It is also used by Ozio Gallery ( extensions.joomla.org/extension/ozio-gallery ). I run Ozio Gallery on one of my websites and it is a realy great viewer.

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 11 months ago #196600

Hi,

The lib is a little bit more compatible with a gallery system even if I'm not sure it will work with the HikaShop system ; specially when you have variants which change dynamically the images.

Some other issue that we could have, is the license of that library :

For personal, non-profit organizations, or open source projects (without any kind of fee), you may use nanoGALLERY for jQuery for free.
All other uses require the purchase of a professional license.


If Nano Gallery want to create an integration with the HikaShop image lightbox system ; we can provide all useful details for that, but I don't think that we will integrate (again) some code in HikaShop with a component which have a restrictive license.

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: 119
  • Thank you received: 6
8 years 11 months ago #198929

Hi

I"m trying to integrate rokbox 2 instead of shadow box

i fix the setting to shadowbox external

i simply change line 564 to 568 of popup.php to

$rel = ' data-rokbox data-rokbox-caption="'.$params['title'].'" ';

if(!empty($params['gallery'])) {

$rel = ' data-rokbox data-rokbox-caption="'.$params['title'].'"  data-rokbox-album="'.str_replace('"','', $params['gallery']).'"';

seems ok but 2 issues

1) I cannot have the title for the caption.(data-rokbox-caption). i have tried also with $title on my code. The image title don't want to load

2) gallery don't want to load on first picture . if i click on one of other picture data-rokbox-album is loaded

test here
www.tricotin.tramber9.o2switch.net/index...ls-fantaisie-abakan/

question: i can overide popup.php ?
This option (rokbox integration) cannot be in the system ?

thanks

Bertrand

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 11 months ago #199030

Hi,

If you want to use the parameter title ; you have to pass it when you call the function, like the gallery is already passed

echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));

In the product page, the first picture is not made to open the gallery ; it does not have any gallery parameter and his code (giving in the $attr) is made to simulate a click on the corresponding thumbnail.

Because the popup helper is an HikaShop helper ; you can override it (like HikaShop classes).
See explanation here : www.hikashop.com/forum/product-category-...atermark.html#184987
You will need to do the same thing for "popup" and override just the function "image" to call your custom "imageRokbox" function.

We will modify the popup helper in order to allow plugins to create new types ; so instead of doing an override, you will have your little custom plugin.

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: 119
  • Thank you received: 6
8 years 11 months ago #199040

oula, thanks

means in block_img near

if(empty($variant_name)) {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image'));
							} else {
								echo $this->popup->image($html, $img->origin_url, $id, $attr, array('gallery' => 'hikashop_main_image_VARIANT_NAME'));

i need to add the title somewhere ?
i'm little bit lost in php sorry


Bertrand

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

  • Posts: 80
  • Thank you received: 8
8 years 11 months ago #199046

Hi Bertrand,
I'm very interested in the Rokbox implementation. If it works in Hikashop, would you be so kind to publish a link where i can see the demo and also make a description available in this forum?
Regards, Benny.

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

  • Posts: 119
  • Thank you received: 6
8 years 11 months ago #199052

Thaks Jérome

the best i can have with rokbox

www.tricotin.tramber9.o2switch.net/index...ls-fantaisie-abakan/

my small modif in popup.php

if(!$isRel) {

			$rel = ' data-rokbox ';

if(!empty($params['gallery'])) {

$rel = ' data-rokbox data-rokbox-album="'.str_replace('"','', $params['gallery']).'"';

i don't succeed to call fonction for titlle ==> in my block_img overide i juste replace title by data-rokbox-caption
if($img->success) {
									$attr = 'data-rokbox-caption="'.$this->escape(@$image->file_description).'"';
									if (!empty ($this->element->images) && count($this->element->images) > 1) {
										$attr .= '';
									}
									$html = '<img id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" data-rokbox-caption="'.$this->escape(@$image->file_description).'"  title="'.$this->escape(@$image->file_description).'" alt="'.$this->escape(@$image->file_name).'" src="'.$img->url.'"/>';

and
$attr = 'data-rokbox-caption="'.$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).'\');"';


concerning overide, i can wait for your trick !!

i have tested with this file (function image) without success
<?php

defined('_JEXEC') or die('Restricted access');


include_once $originalFile;
class hikashopPopupHelperOverride extends hikashopPopupHelper {
}



class hikashopPopupHelper{


	function image($content, $url, $id = null, $attr = '', $params = array()) {

		$html = '';

		$config = hikashop_config();

		$popupMode = $config->get('image_popup_mode', 'mootools');



		switch($popupMode) {

			case 'shadowbox':

			case 'shadowbox-embbeded':

				return $this->imageShadowbox($content, $url, $id, $attr, $params);

			case 'mootools':

			default:

				return $this->imageMootools($content, $url, $id, $attr, $params);

		}

		return $html;

	}



	function imageMootools($content, $url, $id = null, $attr = '', $params = array()) {

		JHtml::_('behavior.modal');

		$html = '';

		if($content === null)

			return $html;



		$isOnclick = (strpos($attr, 'onclick="') !== false);

		$onClick = '';

		if(!$isOnclick)

			$onClick = ' onclick="SqueezeBox.fromElement(this,{parse:\'rel\'});return false;"';



		if(!empty($id))

			$id = ' id="'.$id.'"';

		else

			$id = '';



		$html = '<a '.$attr.$onClick.$id.' href="'.$url.'" rel="{handler:\'image\'}" target="_blank">'.$content.'</a>';

		return $html;

	}



	function imageShadowbox($content, $url, $id = null, $attr = '', $params = array()) {

		$html = '';

		if($content === null)

			return $html;



		static $init = false;

		if($init === false) {

			$config = hikashop_config();

			$shadowboxMode = $config->get('image_popup_mode', 'mootools');

			$doc = JFactory::getDocument();

			if($shadowboxMode != 'shadowbox-embbeded') {

				$doc->addStyleSheet('//www.hikashop.com/cdn/shadowbox/shadowbox.css');

				$doc->addScript('//www.hikashop.com/cdn/shadowbox/shadowbox.js');

				$doc->addScriptDeclaration("\r\n".'Shadowbox.init();'."\r\n");

			}

			$doc->addScriptDeclaration("\r\n".'(function(){ window.Oby.registerAjax("hkContentChanged", function(){ Shadowbox.clearCache(); Shadowbox.setup(); }); })();'."\r\n");

			$init = true;

		}


		$isRel = (strpos($attr, 'rel="') !== false);


		$rel = '';

		if(!$isRel) {

			$rel = ' data-rokbox data-rokbox-album="'.str_replace('"','', $params['gallery']).'"';

if(!empty($params['gallery'])) {

$rel = ' data-rokbox data-rokbox-album="'.str_replace('"','', $params['gallery']).'"';

			}

		}



		if(!empty($id))

			$id = ' id="'.$id.'"';

		else

			$id = '';



		$html = '<a '.$attr.$rel.$id.' href="'.$url.'">'.$content.'</a>';

		return $html;

	}



	function getAttr($attr, $class) {

		if(empty($attr)) {

			return 'class="'.$class.'"';

		}

		$attr = ' '.$attr;

		if(strpos($attr, ' class="') !== false) {

			$attr = str_replace(' class="', ' class="'.$class.' ', $attr);

		} elseif(strpos($attr, ' class=\'') !== false) {

			$attr = str_replace(' class=\'', ' class=\''.$class.' ', $attr);

		} else {

			$attr .= ' class="'.$class.'"';

		}

		return trim($attr);

	}

}

grosse bidouille :P

take care

Bertrand

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 11 months ago #199079

Hi,

Just put the function image into the class hikashopPopupHelperOverride and you your specific content for rokbox into it.
About the title ; you need to add a new parameter in the array where you can already see the "gallery" parameter.

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: 119
  • Thank you received: 6
8 years 11 months ago #199140

I try :angry:

My new file, named poppu.php, i have pot in
mytemplate/html/com_hikashop/administrator/helpers

<?php
defined('_JEXEC') or die('Restricted access');

include_once $originalFile;
class hikashopPopupHelperOverride extends hikashopPopupHelper {
	function image($content, $url, $id = null, $attr = '', $params = array()) {
		$html = '';
		if($content === null)
			return $html;

		$isRel = (strpos($attr, 'rel="') !== false);
		$rel = '';
		if(!$isRel) {
			$rel = ' data-rokbox ';
			if(!empty($params['gallery'])) {
				$rel = ' data-rokbox data-rokbox-album="'.str_replace('"','', $params['gallery']).'"';
			}
		}

		if(!empty($id))
			$id = ' id="'.$id.'"';
		else
			$id = '';

		$html = '<a '.$attr.$rel.$id.' href="'.$url.'">'.$content.'</a>';
		return $html;
	}
}

without succes

Bertrand

Last edit: 8 years 11 months ago by Jerome. Reason: code fix

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 11 months ago #199199

Hi,

I fixed your code in order to have something which will be executed correctly.

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: 119
  • Thank you received: 6
8 years 11 months ago #199209

Thanks

I put the new file in the dedicated folder
site_root/templates/rt_nuance/html/com_hikashop/administrator/helpers



but the overide don't want to run ???



take care

Bertrand

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

  • Posts: 25994
  • Thank you received: 4004
  • MODERATOR
8 years 11 months ago #199217

Hi,

The file name should be "popup.override.php" no "popup.php".
I know that is strange but because HikaShop can look for the file in several different places ; we prefered to have a special name which will not be in conflict with the original one.

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.
The following user(s) said Thank You: tramber91

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

  • Posts: 119
  • Thank you received: 6
8 years 11 months ago #199362

Effzctively overide running

but :dry: site crash on product view



attached my file

@+

Bertrand

Attachments:
Last edit: 8 years 11 months ago by tramber91.

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

  • Posts: 119
  • Thank you received: 6
8 years 11 months ago #199367

Sorry it is ok now :woohoo:

maybe was a question of format all code was on same line

thanks

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

  • Posts: 80
  • Thank you received: 8
8 years 11 months ago #199380

Hi Bertrand,

Is it possible for you to make a 'for dummies' description of the steps to take so I can switch to Rokbox also.
Would appreciate this very much.

Regards, Benny

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

  • Posts: 119
  • Thank you received: 6
8 years 11 months ago #199389

Hi

1) Rokbox installed

2) Product format div

3) modification of view, block image



File Attachment:

File Name: view_produ...mage.txt
File Size:6 KB


4) overide of popup.php
put the file popup.override.php in
site_root/templates/your_template/html/com_hikashop/administrator/helpers


File Attachment:

File Name: popup_over...20-2.txt
File Size:1 KB



that's all

Bertrand

Attachments:
Last edit: 8 years 11 months ago by tramber91.
The following user(s) said Thank You: bp54

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

Time to create page: 0.117 seconds
Powered by Kunena Forum