I wanted to use
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm with 4images.
This is what i did, it could be helpful for someone maybe.
If someone wants to add something or make changes to these lines, it is ok
- Download motiongallery.js and gallerystyle.css
- copy motiongallery.js in template folder
- open gallerystyle.css and paste the whole code into style.css at the end (in template folder)
- open header.html and paste between <head> and </head> the code of "step1" (see Dynamic Drive page)
but not the line :
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />- always in step1, change :
<script type="text/javascript" src="motiongallery.js">by :
<script type="text/javascript" src="{template_url}/motiongallery.js">- then paste the code of "step 2" in categories.html, for exemple, with CMOtion :
change :
{if thumbnails}
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head1">{thumbnails}</td>
</tr>
</table>
{endif thumbnails}by :
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
{if thumbnails}
{thumbnails}
{endif thumbnails}
</nobr>
</div>
</div>- then you must open 4images admin and "configuration" (wonder if it is the same in english than in french ?)
change the numbers of :
Image table cells => 30 (or another number)
Image table rows => 1 (only one line)
If you use CMOtion II, cells => 1
- well i have a problem left, if I put 200 or more in "Image table cells", the script displays a lot of blank cells after the last thumbnail (in categories which don't have so many thumbnails), so when you make CMotion move, the group of thumbnails seems to disapear on the left of the page. If someone knows how to change that...
====================================================
In French :Comment afficher les vignettes de 4images avec CMOtion Image Gallery de DynamicDrive (ou CMOtion Image Gallery II)- Télécharger les fichiers motiongallery.js et gallerystyle.css
http://www.dynamicdrive.com/dynamicindex4/cmotiongallery.htm- mettre motiongallery.js dans le dossier template de 4images avec les html
- ouvrir gallerystyle.css et coller son contenu tout à la fin de style.css (dans le dossier template)
- ouvrir header.html et coller entre les balises <head> le contenu du step 1 (voir la page concernée sur Dynamic Drive)
sauf la ligne :
<link rel="stylesheet" type="text/css" href="gallerystyle.css" />- dans ces lignes toujours, il faut modifier :
<script type="text/javascript" src="motiongallery.js">en :
<script type="text/javascript" src="{template_url}/motiongallery.js">- ensuite, copier le contenu du step 2 dans categories.html, c'est à dire (dans le cas de CMOtion):
remplacer :
{if thumbnails}
<table width="450" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="head1">{thumbnails}</td>
</tr>
</table>
{endif thumbnails}par :
<div id="motioncontainer" style="position:relative;overflow:hidden;">
<div id="motiongallery" style="position:absolute;left:0;top:0;white-space: nowrap;">
<nobr id="trueContainer">
{if thumbnails}
{thumbnails}
{endif thumbnails}
</nobr>
</div>
</div>- ensuite il faut aller dans l'admin de 4images, dans "configuration"
dans la partie "Gestion des images"
Image table cells (cellules) 30 (ou un autre nombre)
Image table rows (lignes) 1
si c'est CMOtion II, il faut faire l'inverse, cells => 1
- le problème qu'il me reste c'est que si l'on utilise un nombre élevé, "cells (cellules) 200" par exemple, le script génère un grand nombre de cellules vides à la suite de la dernière vignette, dans les catégories qui n'ont pas autant de vignettes. Par exemple si vous avez 15 vignettes dans une catégorie, elles sont suivies de 185 cellules vides, donc lorsque vous faites fonctionner CMotion avec la souris, la bande de vignettes disparaît à gauche de la page. Si quelqu'un sait comment changer ça...
