Shadowbox Integration

gb2world · #51 02-11-2009, 10:58 PM

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:

Code:

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

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:

Code:

<div class="shadowbox_images">

beetlejuice · #52 02-11-2009, 11:30 PM

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?

gb2world · #53 02-12-2009, 12:15 AM

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.

beetlejuice · #54 02-12-2009, 12:43 AM

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

Code:

<div id="shadowbox_images"> to <div "float: left; width: 500px">
{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>

Thanks again

gb2world · #55 02-12-2009, 01:15 AM

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;
}

beetlejuice · #56 02-12-2009, 01:28 AM

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.

beetlejuice · #57 02-12-2009, 01:35 AM

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!

gb2world · #58 02-12-2009, 01:47 AM

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

beetlejuice · #59 02-12-2009, 02:03 AM

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

gb2world · #60 02-12-2009, 02:23 AM

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