Skip to main content

Navigation buttons in shadowbox

More
11 years 6 months ago #196107 by bp54
-- 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.

More
11 years 6 months ago #196113 by Xavier
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.

More
11 years 6 months ago #196495 by bp54
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.

More
11 years 6 months ago #196509 by nicolas
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.

More
11 years 6 months ago #196596 by bp54
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.

More
11 years 6 months ago #196600 by Jerome
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.

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

More
11 years 5 months ago #198929 by tramber91
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
Code:
$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.

More
11 years 5 months ago #199030 by Jerome
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
Code:
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.

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

More
11 years 5 months ago #199040 by tramber91
oula, thanks

means in block_img near
Code:
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.

More
11 years 5 months ago #199046 by bp54
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.

More
11 years 5 months ago #199052 by tramber91
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
Code:
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
Code:
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
Code:
$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
Code:
<?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.

More
11 years 5 months ago #199079 by Jerome
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.

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

More
11 years 5 months ago - 11 years 5 months ago #199140 by tramber91
I try :angry:

My new file, named poppu.php, i have pot in
mytemplate/html/com_hikashop/administrator/helpers
Code:
<?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: 11 years 5 months ago by Jerome. Reason: code fix

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

More
11 years 5 months ago #199199 by Jerome
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.

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

More
11 years 5 months ago #199209 by tramber91
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.

More
11 years 5 months ago #199217 by Jerome
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.
The following user(s) said Thank You: tramber91

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

More
11 years 5 months ago - 11 years 5 months ago #199362 by tramber91
Effzctively overide running

but :dry: site crash on product view



attached my file

@+

Bertrand
Last edit: 11 years 5 months ago by tramber91.

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

More
11 years 5 months ago #199367 by tramber91
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.

More
11 years 5 months ago #199380 by bp54
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.

More
11 years 5 months ago - 11 years 5 months ago #199389 by tramber91
Hi

1) Rokbox installed

2) Product format div

3) modification of view, block image



This attachment is hidden for guests.
Please log in or register to see it.


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


This attachment is hidden for guests.
Please log in or register to see it.



that's all

Bertrand
Last edit: 11 years 5 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.359 seconds
Powered by Kunena Forum