X-Cart forums

[KeithXtreme]

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}

[KeithXtreme]

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

[gb2world]

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.

[KeithXtreme]

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

[gb2world]

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;

[KeithXtreme]

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>

[PhilJ]

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

[beetlejuice]

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

[gb2world]

can you post a link?

[beetlejuice]

Originally Posted by gb2world

can you post a link?

Here tis:

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

Below is my shadowbox_images.tpl

<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=75 height=75/>{$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=75 height=75/>{$images[image].alt|escape}{if $images[image].alt|escape eq ""}{/if}</a></div>
{/if}
{/if}
{/section}
{/if}
</div>

here is the shadowbox part of my skin1.css

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

.shadowbox_images {
    float: left;
width: 500px;
}

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