lightbox view multiple photos

  • Posts: 49
  • Thank you received: 0
11 years 3 months ago #123969

i have multiple pictures for each product. Now when clicking on a picture it opens in a lightbox but there's no possibility to click through to the next picture belonging to that product. you have to close the picture which you are viewing and have to click the other pictures one by one. Is it possible to add some kind of option which allows users to click to the next picture without first closing the picture that you are viewing.

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 3 months ago #123981

Hi,

We have an integration with Shadowbox for that.
You can find it in the documentation page, section "integrations".

We will improve this integration in the next release which will become integrated directly in HikaShop. Shadowbox will still be required and won't be added by HikaShop, but it will be easier to use it, without overrides.

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: 49
  • Thank you received: 0
11 years 3 months ago #123984

it ain't joomla 3.x compatible....

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 3 months ago #123985

Hi,

You still have the possibility to integrate shadowbox directly in your template, like we did for our website (which use J3).

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: 8
  • Thank you received: 0
11 years 2 months ago #126978

Hi Jerome,

Could you maybe explain how I can integrate Shadowbox directly into a template? I'm working on a J3 site as well and would like to use Shadowbox to navigate through product images directly, without first having to close one image to open another. Have been stumbling with the fact that the plugin doesn't support J3 but haven't found any other solution yet.

Thanks!

Last edit: 11 years 2 months ago by djendesign.

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 2 months ago #127056

Hi,

The best to integrate shadowbox is to put it directly into your template.
Downloading the javascript/css files and store it in a specific folder (in your template or in the joomla media folder).
After that you will have to edit your template to include the shadowbox javascript/css files and put a little script for the initialization:

<script type="text/javascript">
Shadowbox.init();
</script>
You can see our website, we have Joomla 3 and we also have 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: 8
  • Thank you received: 0
11 years 2 months ago #127267

Thanks for the reply! Unfortunately can't seem to make it work. Uploading the hikashop_image.php file and inserting the javascript into my template both seem to work. It's the plugin that I don't know what to do with. You want me to unzip the folder and upload it to root/template/MYTEMPLATE? Don't I need to install/enable it somehow?

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 2 months ago #127307

Hi,

Sorry but I didn't tell you to install the Shadowbox HikaShop override. You don't have to and I recommend you to remove this useless file.
HikaShop 2.2.2 have a native integration with Shadowbox but first, you have to install/integration manually Shadowbox in your template.

So please follow my previous instruction to integrate shadowbox in your template. Once done, I will explain you how to activate the shadowbox popup in the HikaShop popup system.

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: 43
  • Thank you received: 0
11 years 2 months ago #129436

hey
Is it only when you are completely inside each product to lightbox work, or can you also get it to work from the product overview page, so you can scroll between products?

Thanks

Henrik Ris

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 2 months ago #129495

Hi,

The product overview page ?

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: 43
  • Thank you received: 0
11 years 2 months ago #129514

What I mean is when the customer are on the page where all products in a category is displayed. can it be made so that the images open in a lightbox and the customers can navigate between products in a category, inside the lightbox, just like a image gallery whit lightbox.

Regards

Thanks

Henrik Ris
Attachments:
Last edit: 11 years 2 months ago by Henrik.

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 2 months ago #129588

Hi,

The image have a link to the product page, it's not a lightbox.
If you want to put a lightbox here, you will have to override/customize the view of the product listing.

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: 43
  • Thank you received: 0
11 years 1 month ago #129791

Ok thanks
Can you guide me how I can make a ​​lightbox on my product page, it must open in lightbox instead of going into the product itself.
like the one on your page

www.hikashop.com/extensions/upgrade-my-version.html

my version is joomla 3.0
and it's a lightbox on this page I mean.

maalfoto.dk/index.php/motionslob/product/listing

Thanks

Henrik Ris

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 1 month ago #129846

Hi,

You have to create an override for the "product | listing_...." (the type of listing you are using) and use some code that you will find in the view "product | show_block_img" to display the lightbox link.

echo $this->popup->image($html, $img->origin_url, null, $attr);
You might need to create the "popup" object, in the product listing, it might not be initialized.
$this->popup = hikashop_get('helper.popup');

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: 43
  • Thank you received: 0
11 years 1 month ago #131910

Hi again.
I have played around with the code but I can't get it right, can you help me along?

show_block_img.php
Line 53-75

<div class="hikashop_product_main_image_thumb" id="hikashop_image_main_thumb_div<?php echo $variant_name;?>" <?php echo $style;?> >
					<div style="<?php if(!empty($divHeight)){ echo 'height:'.($divHeight+20).'px;'; } ?>text-align:center;clear:both;" class="hikashop_product_main_image">
						<div style="position:relative;text-align:center;clear:both;<?php if(!empty($divWidth)){ echo 'width:'.$divWidth.'px;'; } ?>margin: auto;" class="hikashop_product_main_image_subdiv">
						<?php
							if($this->image->override) {
								echo $this->image->display(@$image->file_path,true,@$image->file_name,'id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle"','id="hikashop_main_image_link"', $width,  $height);
							} else {
								if(empty($this->popup))
									$this->popup = hikashop_get('helper.popup');
								$image_options = array('default' => true);
								$img = $this->image->getThumbnail(@$image->file_path, array('width' => $width, 'height' => $height), $image_options);
								if($img->success) {
									$attr = '';
									if (!empty ($this->element->images) && count($this->element->images) > 1) {
										$attr = 'onclick="return window.localPage.openImage(\'hikashop_main_image\');"';
									}
									$html = '<img id="hikashop_main_image'.$variant_name.'" style="margin-top:10px;margin-bottom:10px;display:inline-block;vertical-align:middle" title="" src="'.$img->url.'"/>';
									echo $this->popup->image($html, $img->origin_url, null, $attr);
								}
							}
							if(!empty($this->element->badges))
								$this->classbadge->placeBadges($this->image, $this->element->badges, '0', '0');
						?>

How much shuld I take over in listing_table.php ?

listing_table.php
Line 95-96
<?php if($this->params->get('link_to_product_page',1)){ ?>
									<a href="<?php echo $link;?>" title="<?php echo $this->escape($this->row->product_name); ?>">

Ragards,

Thanks

Henrik Ris

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

  • Posts: 26166
  • Thank you received: 4029
  • MODERATOR
11 years 1 month ago #131932

Hi,

Well, it is a little bit more complicated than modifying one line in the listing_table view.
The popup is generated by

echo $this->popup->image($html, $img->origin_url, null, $attr);
The first parameter is the content which is in the "<a ..>" link (so the thumbnail image in the product page).
The second parameter is the link to the original image ($link in the listing_table view).
The third parameter is not used for our case.
The last parameter is the attributes, like the class or the onclick.

In the product page, we set the onclick event which use the javascript function defined later in the view. The function will create the gallery effect (removing duplicate images) but if you don't want to have a gallery, you can set this parameter empty ; it should work good.

As you will understand, it requires some php/development knowledge.

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: 83024
  • Thank you received: 13403
  • MODERATOR
10 years 11 months ago #139631

Hi,

We've looked a bit at the shadowbox plugin and made a version compatible with Joomla 3 that you can get here:
www.hikashop.com/shadowbox.zip
We've also contacted the developers and offered them the modified package. They should release a Joomla 3 compatible plugin soon.

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

Time to create page: 0.101 seconds
Powered by Kunena Forum