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