Re: Shadowbox Integration
 

I got it to work using the code below, what happens is...it does not pass the size to the rest of the images.....The first image load in the flash player, the others are there but when you click to view them the flash player goes full screen. so the size variable is not being passed to flash...

{if $images ne ""}
{assign var="i_counter" value=1}
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
{if $i_counter eq 1}
<div class="shadowboxlinks"><a rel="shadowbox[images]" class="shadowbox" href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}"><img src="{$ImagesDir}/zoom.gif" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""}{$lng.lbl_image}{math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{else}
<div class="shadowboxlinks"><a rel="shadowbox[images]" class="hidden" href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title="{$images[image].alt|escape}"><img src="{$ImagesDir}/zoom.gif" alt="{$lng.lbl_click_to_enlarge|escape}" /> {$images[image].alt|escape}{if $images[image].alt|escape eq ""}{$lng.lbl_image}{math equation="value+1" value=$smarty.section.image.index}{/if}</a></div>
{/if}
{/if}
{/if}
{assign var="i_counter" value=0}
{/section}
{/if}

Re: Shadowbox Integration
 

Well I stumbled upon how to replace the text and maginifier with thumbnails....I just need to figure out how to space them and add a <br> tag after 2 of them.....so every two images it <br> and then another two....

{if $images ne ""}

{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<div class="shadowboxlinks"><a rel="shadowbox[images]" class="shadowbox" href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}"><img src="{$images[image].tmbn_url}" width=50 height=50/></a></div>
{else}
<div class="shadowboxlinks"><a rel="shadowbox[images]" class="shadowbox" href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title="{$images[image].alt|escape}"><img src="{$images[image].tmbn_url}" width=50 height=50/></a></div>
{/if}
{/if}
{/section}
{/if}


Update: got them spaced with a border by changing the shadowboxlink css....

.shadowboxlinks {margin: 2px;
border: thin solid #868686;
padding: 2px;
height: 50px;
width: 50px;}

I just want two rows of the now....you can check out what I am doing here: http://www.chopworx.com/product.php?productid=137&cat=21&page=1

Re: Shadowbox Integration
 

It looks good.

You should be able to adjust the in rows by adding a float:left; to the .shadowboxlinks class. Then, however many fit in the container, in your case a table cell, will be in the row before it breaks.

Re: Shadowbox Integration
 

I dont understand that, how do you control where the row breaks?

Re: Shadowbox Integration
 

The images will keep floating next to each other until they can no longer fit into what is containing them. Then, there will be a break to the next line.

So, if you want there to be four images, you could place the entire code into a div with a width that will allow 4 images to fit, then the 5th image will break to the next line.

<div id="shadowbox_images">
all your code for the shadow box images
<.div>

then in the css:

#shadowbox_images
{ width: 500px;}

or however wide you need

then add to .shadowboxlinks

float:left;

Re: Shadowbox Integration
 

AWESOME! It worked perfect....Man I need to do more work with CSS and Div's
Here is the final code:

<div id="shadowbox_images">
{if $images ne ""}
{section name=image loop=$images}
{if $images[image].avail eq "Y"}
{if $images[image].tmbn_url}
<div class="shadowboxlinks"><a rel="shadowbox[images]" href="{$images[image].tmbn_url}" title="{$images[image].alt|escape}"><img src="{$images[image].tmbn_url}" width=50 height=50/>{$images[image].alt|escape}{if $images[image].alt|escape eq ""}{/if}
</a></div>
{else}
<div class="shadowboxlinks"><a rel="shadowbox[images]" href="{$xcart_web_dir}/image.php?id={$images[image].imageid}&type=D" title="{$images[image].alt|escape}"><img src="{$images[image].tmbn_url}" width=50 height=50/>{$images[image].alt|escape}{if $images[image].alt|escape eq ""}{/if}</a></div>
{/if}
{/if}
{/section}
{/if}
</div>

Re: Shadowbox Integration
 

Feb 7th 2009 - Shadowbox 2.0 integration released...
http://www.xcartmods.co.uk/x-cart-shadowbox-v20-integration-v41x-x-cart-mods-pr-54.html

Re: Shadowbox Integration
 

Using KeithXtreme final code my thumbnail images are vertical, how can I get them to sit across the page? I've tried float left etc and specified 500+ widths in the classes mentioned, but still the thumbnails are vertical.

Thanks

Re: Shadowbox Integration
 

can you post a link?

Re: Shadowbox Integration
 

Here tis:

http://www.visionone.com.au/benq-cp270-data-projector.html

Below is my shadowbox_images.tpl


here is the shadowbox part of my skin1.css


it's almost like the css above is not even being called, as there are no borders around my thumbnails like http://www.chopworx.com/product.php?...&cat=21&page=1

so I'm not sure what's going on.

Thanks for taking the trouble to look for me

Regards

beetlejuice

Re: Shadowbox Integration
 

Hi beetlejuice -

One issue - in your skin1.css you have shadowbox_images defined as a class, but you are calling it as an id. If you are only using that tag once - you can change it to:

If you call it more that once - you should leave it defined as a class in your css and change how you call it to:

Re: Shadowbox Integration
 

thanks gb2world but it made no difference, the thumbnails are still vertical.

Even if you look at chopperworx's site his thumbnails are in rows of two supposedly based on the last code. Duh!

Any other ideas to try?

Re: Shadowbox Integration
 

There is something odd in your css file - it looks like there is a typo causing a syntax error around the line where .contact is defined. Search in you skin1.css file for .contact - remove the mismatched brackets that you find there, and see if that now allows the css to be read correctly by the browser.

Re: Shadowbox Integration
 

Found the offending { :? now have to find where that additional css came from. No other site I manage has it so a little investigation is on the cards. It helped the shadowbox a little by surrounding the thumbnails with a border but I still can't get the left alignment working.

should I use the css, or call it directly from the shadowbox_images.tpl like


Thanks again

Re: Shadowbox Integration
 

You should be able to use the css from your css file. You can use in-line css if you want, but, it is not necessary.

If you do use in-line, the code you posted needs to be changed.

The shadowbox_images div is intended to be the container - so you want to set it to have a width that is big enough so the divs with the class shadowboxlinks will float inside it.

something like:
#shadowbox_images { width: 500px;}

then, inside there are the floating divs with the images:

.shadowboxlinks {margin: 2px;
border: thin solid #868686;
padding: 2px;
height: 50px;
width: 50px;
float:left;
}

Re: Shadowbox Integration
 

Yeehaa! Got it, thank you so much for your patience gb2world.


Dang! Got a little carried away, in FF and Opera perfecto, typically Internet Exploder 7 shows vertical thumbnails still, and even worse the dark screen overlay only, no images show. Does anybody know how much I despise IE.8O

Re: Shadowbox Integration
 

Alright nearly there.

Replaced

<<html xmlns="http://www.w3.org/1999/xhtml" > with

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

in home.tpl and now the images appear in IE, but the thumbnails are still vertical.

What else do I need to do? AARghhhhh!

Re: Shadowbox Integration
 

I don't see the id shadowbox_images defined anywhere in your css. IE probably need that to be defined

Re: Shadowbox Integration
 

Done!!

reloaded shadowbox_images.tpl from the original download, then re-copied KeithExtreme's version, fixed up my skin1.css and it works beautifully.

Thanks again gb2world, you've been a big help. Just as an afterthought, you wouldn't know how to make the menu on the left hide beneath the shadow boc when it's called, like the rest of the site?
I wrapped literal tags around the javascript in home.tpl and that just killed all the css for the entire site.

beetlejuice

Re: Shadowbox Integration
 

It is probably a z-index set somewhere - the menu z-index might be set higher than the shadowbox.

You have a css file that is part of the shadowbox installation - look for shadowbox_container and set the z-index higher

Re: Shadowbox Integration
 

The z index was 999, so I set it to 1200 and done.

Fantastic help mate. :D

Re: Shadowbox Integration
 

No problem - glad you got it working - it looks good. To figure out your css issues - I used firefox & firebug - it would be difficult to find the problems you were having without it. For the IE issue - I used their developer tool bar to find the problem. I'd never try and debug using the IE developer toolbar - but when something goes wrong in IE - it can be helpful.

Re: Shadowbox Integration
 

I'm new to this thread and was able to integrate Shadowbox, and the thumbnails look great. How would I be able to apply this to the main product image without turning it into a thumbnail size?

I'd appreciate any help. Thanks in advance!

Re: Shadowbox Integration
 

The problem I am having is that when I try and play a movie hosted on my site such as

www.example.com/skin1/videos/jack.wmv it links like www.example.com/skin1/videos/jack.wmv&autoplay=1 and will not play the video it just goes to a 404. Yet if I type that url into my address bar it starts the movie no problem.

Any ideas?

Also it seems to work fine when linking to any videos that are not hosted on my site.

Re: Shadowbox Integration
 

Got it I had to add a ? to the end of the file path. Me so dumb.

Re: Shadowbox Integration
 

Hi All.
I must start by pointing out that I am still rather green when it comes to xCart, so my questions may seem dumb. I am currently trying to get shadowbox integrated on to our website, but I seem to be having trouble.
I followed the instructions to install Shadowbox, which went well, but with no luck.

Does this code work for any page, and any image?
That is to say, I have an image in the body of a category (that is not part of the product catalog) that I would like to display with Shadowbox, is this possible?
Or does Shadowbox only work for images in the catalog?
Thanks

Re: Shadowbox Integration
 

From skin1/customer/home.tpl take out the IF statement surrounding the shadowbox code...
You should then be able to use it throughout your store.

Re: Shadowbox Integration
 

The code I used comes after the {if..}...{/if}

<head>
<title>{strip}
{capture name=title}
{if $config.SEO.page_title_format eq "A"}
{section name=position loop=$location}
{if not %position.first%}&nbsp;::&nbsp;{/if}
{$location[position].0|strip_tags|escape}
{/section}
{else}
{section name=position loop=$location step=-1}
{if not %position.first%}&nbsp;::&nbsp;{/if}
{$location[position].0|strip_tags|escape}
{/section}
{/if}
{/capture}
{if $config.SEO.page_title_limit <= 0}
{$smarty.capture.title}
{else}
{$smarty.capture.title|replace:"&nbsp;":" "|truncate:$config.SEO.page_title_limit|replac e:" ":"&nbsp;"}
{/if}
{/strip}</title>
{include file="meta.tpl"}

<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="{$SkinDir}/{#CSSFile#}"/>

<script type="text/javascript" src="{$SkinDir}/shadowbox/build/adapter/shadowbox-base.js"></script>
<script type="text/javascript" src="{$SkinDir}/shadowbox/build/shadowbox.js"></script>
{literal}
<script type="text/javascript">
Shadowbox.loadSkin('classic', '{/literal}{$SkinDir}{literal}/shadowbox/build/skin');
Shadowbox.loadLanguage('en', '{/literal}{$SkinDir}{literal}/shadowbox/build/lang');
Shadowbox.loadPlayer(['flv', 'html', 'iframe', 'img', 'qt', 'swf', 'wmp'], '{/literal}{$SkinDir}{literal}/shadowbox/build/player');
window.onload = function(){
var options = {
counterType: 'skip',
continuous: true,
animSequence: 'sync',
autoplayMovies: true
};
Shadowbox.init(options);
};
</script>
{/literal}

</head>

Could this be a problem?

Re: Shadowbox Integration
 

I installed shadowbox and it is a great mod.
Couple of questions .
1.How can I get rid of the product description ?
2. How do I get the thumbnails appearing instead of that small gif icon ?

Thank you.

Re: Shadowbox Integration
 

Any luck using this on version 4.2.1?

Re: Shadowbox Integration
 

http://www.rotopax.com/niche-large-atv-bag-rotopax-fuel-pack-atv-fuel-gas-container-gas-can-fuel-c-22-p-1-pr-110.html

You guys left some awesome instructions on getting this squared away, it is SO MUCH appreciated. Can someone check that link on their Safari and IE? By adjusting the margin and padding in the css I fixed the vertical problem in IE and Safari. I need another tester.


Thanks!

Re: Shadowbox Integration
 

Re: Shadowbox Integration
 

How did you make your detailed images that large?

Re: Shadowbox Integration
 

Thats the part I still don't know how to figure out. I'd like the main images to shadowbox also.

As for the size, I really have no idea. Somewhere along the line something has been changed- This store is really really modified. In fact, I never noticed they were so big.

I was also playing around with that Dynamic Images mod from that site everyone hates around here, but I don't think that has anything to do with it.

Re: Shadowbox Integration
 

Tell me how and I will tell you how.. lol... please
Hint: /skin1/customer/main/product.tpl

What is your opinion on the Dynamic Images and who did you buy it through? I need something definetly better.

Re: Shadowbox Integration
 

The dynamic images is from phpsitesolutions.com. It's free. From what I've read here online, the site owner is really unethical and shouldn't be trusted. I've read a lot of bad stories in here about him and I don't think I would make any purchases from him. Free is free though, as long as it doesn't break stuff.

In looking, the size of my product images isn't dependent on it, because the dynamic images module actually failed when I installed it and it's not enabled.

Also looking at the back end, the product thumbs are default to the factory size. I've done so much playing with different lightboxes, I'm really not sure where along the line this happened where it has allowed the product size to be so large. In fact, I never really thought about it until you mentioned it.

I do know for some products, I have went in thru FTP, went to the actual image on the server, changed the size and uploaded it. I've done that for a few products, but not all. I did it because I was messing around with a lightbox trying to get something to work. It's not a very easy or efficient workaround though.

I still need to get the IE issue fixed, sometimes the images are vertical. It's in the css but I don't know how to make the css IE specific.

Re: Shadowbox Integration
 

well everytime on my end the images look correct I'm using IE7 and FF3 no problems.

I wonder if any has Dynamic Images setup for 4.2.1 If you send me your product.tpl template I can comment where you need to put the shadowbox for the main image to work. Just PM me on the board.

I really would like to find out with your thumbs, thats great.

Re: Shadowbox Integration
 

are u using the "Detailed Product Images" module?

Re: Shadowbox Integration
 

yeah, and the version I got is for 4.1.10 and I'm on 4.1.9. It's giving an error, and the error is listed on his forum.

http://forum.phpsitesolutions.com/open-source-software/dynamic-images/how-to-dynamic-images-mod-plus-lyteb...viewer-t4.html

It starts with:

Files patch status:
File Status
skin1/customer/main/product.tpl could not patch
skin1/product_thumbnail.tpl could not patch

FYI- I was reading further on phpsitesolutions- read this forum post- http://forum.x-cart.com/showthread.php?t=44797&highlight=phpsitesolutions

I'll PM you my product.tpl file.

Re: Shadowbox Integration
 

looks like the patch is failing because the contents that its checking against are different since two different versions of xcart. Open the patch file and see what files its editing and just do it manually. Then you will have it.