Album - images stretched in Safari when using Cmotion template

[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 

[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!

[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

[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

[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