Page 1 of 1
Album - images stretched in Safari when using Cmotion template
Posted: Sun Jul 15, 2007 11:24 am
by gajones76
I've been building a site for a friend, and have included an photo gallery that uses the excellent Album module and CMotion template.
(Many thanks to Elijah and Caspar for all their hard work on these
)
However, I have one problem. When the gallery is viewed on Safari (mac), the images are stretched.
I have checked the css and cmotion code to see if the problem was anything obvious, but my skills are fairly limited in this area, so if anyone has some ideas!
The site is at
http://www.iainmckell.com
thanks
Gareth
Re: Album - images stretched in Safari when using Cmotion template
Posted: Sun Jul 15, 2007 8:03 pm
by Caspar
Hi Gareth,
search your stylesheet for
Code: Select all
div.largeview {
text-align: center;
}
and change it to
Code: Select all
div.largeview {
padding: auto;
text-align: center;
}
Hope that helps.
Regards,
Caspar
EDIT: No, it doesn't. I have the same thing on a customer's page. Please give me time until tomorrow night. Thanks so far for pointing it out!
Re: Album - images stretched in Safari when using Cmotion template
Posted: Mon Jul 16, 2007 1:33 pm
by Caspar
Alright, so far I've come to these results:
- The problem doesn't exist with a fresh install of CMSMS 1.0.8 and Album 0.9.2 - at least not on my Webaccount which is on an Apache machine with PHP4. Sorry, again an edit: It does exist. It didn't when I forgot to attach the motiongallery.js to my template.
- There is a javascript work-around, but it has a negative effect on the way images are loaded. I don't even know if it is correct javascript, btw. Anyway, here's my attempt:
Code: Select all
/*
Look for:
{*CMotion gallery with thumbnail list*}
...
<a href="{$onepicture->link}" title="{$onepicture->name} | {$picture->comment}" onclick="document.getElementById('maincmotionpic').setAttribute('src', '{$onepicture->picture}').setAtrribute('width';return false;">
<img src="{$onepicture->thumbnail}" alt="{$onepicture->name}"/>
</a>
...
in your Album Module template.
Add code to the onclick-parameter so that it looks like this:
*/
onclick="document.getElementById('maincmotionpic').setAttribute('src', '{$onepicture->picture}').setAtrribute('width', '{$onepicture->width}').setAtrribute('height','{$onepicture->height});return false;"
/*
Altogether, your thumbnail area should look like this:
*/
{*CMotion gallery with thumbnail list*}
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<div id="trueContainer">
{foreach from=$pictures item=picturesrow}
{foreach from=$picturesrow item=onepicture}
<a href="{$onepicture->link}" title="{$onepicture->name} | {$picture->comment}" onclick="document.getElementById('maincmotionpic').setAttribute('src', '{$onepicture->picture}').setAtrribute('width', '{$onepicture->width}').setAtrribute('height','{$onepicture->height});return false;"> <img src="{$onepicture->thumbnail}" alt="{$onepicture->name}"/></a>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
{/foreach}
</div>
</div>
</div>
The bad news about it: All set.Attribute-parameters are executed one after the other which makes the whole page flip upwards for a second before it is displayed correctly. If you can get a hold of a javascript expert, you'll sure get some better code/solution.
Anyway, upgrading the system should be the easiest way to get best results. Disclaimer: Backup, backup, backup - database and files...
See edit above. So we do need somebody better's javascript.
Regards,
Caspar
Re: Album - images stretched in Safari when using Cmotion template
Posted: Mon Jul 16, 2007 2:54 pm
by gajones76
thanks Caspar, makes sense as I'm having the issue on a clean install as well!
Apart from the page flipping, another side-effect of the code changes seem to be that every time you click on an image, the row of thumbnails resets to the beginning. As you say we probably need to find a better solution. I wonder if there are any javascript experts on these forums who could take a look?
Gareth
Re: Album - images stretched in Safari when using Cmotion template
Posted: Fri Sep 14, 2007 8:06 pm
by Caspar
Check out my revision:
http://forum.cmsmadesimple.org/index.ph ... 724.0.html
Hope it helps!
Sorry, copy-pasted wrong link. Here's the right one:
Album: CMotion template revision