- Old CMotion template: issues
- CMotion template: solutions (so far...)
- Personal thoughts
- The "AJAX"-script link
To make a humiliating story short: it's useless. It was code I had been playing with before I submitted the template. I just forgot to remove it. It has now been removed from the improved template version following below. - gallerystyle.css
If you take a closer look at the default Album stylesheet, you'll find the css-code for the CMotion template at the very end. An external stylesheet named gallerystyle.css is mentioned in the comments. It comes with the original code at dynamicdrive.com, but somehow doesn't seem to have made its way into our Album module. However, when I tested the new version today, its missing didn't seem to have any impact. But: please test yourself. - Picture dimensions bug in Safari
There was a bug in Safari: Upright format pictures would be displayed distorted. The javascript which calls the new image onclick didn't seem to get the new image dimensions . - Why use javascript in the thumbnail links at all?
The original CMotion script provides a popup-window option for viewing the larger image. When I was working on the project I wrote the template for, I preferred to have the larger image displayed in a div instead.
Now, using a regular link (a href...) for each thumbnail image would cause the whole page being reloaded on each click - and the cmotion row would flip back to its starting position, that is the 1st thumbnail in the row. Annoying, if you have a lot of thumbnails to watch...
In the revised version below, I've included a little javascript called simplegallery.js I wrote for another template. In my tests, everything went fine with it. Just to be honest: it's the very first javascript function I've ever written in my life. So PLEASE, test it yourself before you use it!
- Template revision:
In this revision, picture names and comments are deposited in the thumbnail images alt- and title-tags and are being called from there to be displayed with the big picture. That's my simple, maybe newbee-ish solution for avoiding the page-reload effect described above and still have all relevant image info being changed onclick. Issue: HTML messes up the alt-/title-texts, so I decided just not to use it.
Note: Default title-texts, noscript-tip etc. are in German.
Code: Select all
{* CMotion gallery template *}
{* Move javascript link inside the <head> of your page template if you want.
There are also a few parameters you should configure in the script itself such as the speed of the CMotion row, maximum width and starting position for the gallery and a tool tip attached to the cursor. *}
{* Start copy/paste here *}
{literal}
<__script__ type="text/javascript" src="modules/Album/templates/db/js/motiongallery.js">
/***********************************************
* CMotion Image Gallery- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
* Modified by Jscheuer1 for autowidth and optional starting positions
***********************************************/
</__script>
<__script__ src="modules/Album/templates/db/js/simplegallery.js" type="text/javascript">
<!--
/*************************************
SIMPLE GALLERY SCRIPT
by Caspar Huebinger, http://chariotweb.net
Author e-mail: mail@chariotweb.net
*************************************/
//-->
</__script>
{/literal}
{* End copy/paste *}
{if !$album} {* Keep this if you're not sure what it means. *}
<!-- Album list -->
<ul class="albumlist">
{foreach from=$albums item=album}
<li class="thumb">
<a href="{$album->link}">
<img src="{$album->thumbnail}" alt="{$album->name}" title="{$album->name}" {$album->autothumbnailsize} />
</a>
<p class="albumname"><a href="{$album->link}">{$album->name}</a><br />
<span class="albumpicturecount">({$album->picturecount} Bilder)</span>
</p>
</li>
{/foreach}
</ul>
<!-- End Album list -->
{else}
<!-- Album name and comment --> {* If there's an Album index page, a link back is displayed here. *}
<h5>{$album->name}</h5>
<p>
<span class="albumcomment">{$album->comment}<br />
{if $returnlink}<a href="{$returnlink}" title="Zurück zur Galerie-Auswahl">Zurück zur Galerie-Auswahl</a>{/if}
</span>
</p>
<!-- End Album name and comment -->
<!-- Album navigation -->
{if $pagecount>1}
<p class="albumnav">
<a href="{$link.page.first}" title="first page"><< </a>
{if $link.page.previous}<a href="{$link.page.previous}" title="previous page">< </a>{/if}
page {$pagenumber}/{$pagecount}
{if $link.page.next}<a href="{$link.page.next}" title="next page"> ></a>{/if}
<a href="{$link.page.last}" title="last page"> >></a>
</p>
{/if}
<!-- End Album navigation -->
<!-- noscript-tip for disabled javascript -->
<noscript>
<div id="noscript" style="position:absolute;top:2em;left:2em;padding:1em;width:15em;background:#fff;border:2px solid red;z-index:5000000;-moz-opacity:0.7;-khtml-opacity:0.7;opacity:0.7;">
<p style="text-align:left;font-size:1.2em;color:red;">
Für eine bequemere Galerie-Ansicht aktivieren Sie bitte Javascript in Ihrem Browser!<br />Falls dies nicht möglich ist, können Sie die Bilder dennoch vergrößert betrachten; mit dem Zurück-Button Ihres Browsers finden Sie immer wieder zurück zur Bilderliste.
</p>
<ul><!-- A text-only picture-list for users with javascript disabled -->
{foreach from=$pictures item=picturesrow}
{foreach from=$picturesrow item=onepicture}
<li>
<a href="{$onepicture->link}" title="{if $onepicture->name}{$onepicture->name}{else}Foto {$onepicture->number}{/if}">
{if $onepicture->name}{$onepicture->name}{else}Foto {$onepicture->number}{/if}
</a>
</li>
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
{/foreach}
</ul>
</div>
</noscript>
<!-- End noscript-tip -->
<!-- CMotion row with thumbnail pictures -->
{* You can move this underneath the Big Picture section, than the thumbnail row will display after the large image. *}
<div style="text-align:center;"> {* To center the whole gallery. Remove if you don't need it. *}
<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}
<img onclick="changePic(this.src,this.alt,this.title);return false;" id="thumb{$onepicture->number}" src="{$onepicture->thumbnail}" alt="{if $onepicture->name}{$onepicture->name}{else}Foto {$onepicture->number}{/if}" title="{if $onepicture->comment}{$onepicture->comment|escape:'html'}{else}© {sitename}{/if}" {$onepicture->autothumbnailsize} />
{if ($onepicture->number==$picturenumber and !$picture)}{assign var=picture value=$onepicture}{/if}
{/foreach}
{/foreach}
</div> {* End #trueContainer *}
</div> {* End #motiongallery *}
</div> {* End #motioncontainer *}
<!-- End CMotion row -->
<!-- Big Picture. -->
{* The alt/title-attribute uses the sitename-tag with a copyright-symbol as default. You can also use other Album tags. *}
<div class="largeview">
<img id="mainpic" src="{$picture->picture}" alt="{if $picture->name}{$picture->name}{else}Foto {$picture->number}{/if}" title="{if $picture->comment}{$picture->comment|escape:'html'}{else}© {sitename}{/if}" />
</div>
<div class="mainpiccomment">
<h5 id="mainpicname">{if $picture->name}{$picture->name}{else}Foto {$picture->number}{/if}</h5>
<div id="mainpiccomment">{if $picture->comment}{$picture->comment|escape:'html'}{else}© {sitename}{/if}</div>
</div>
<!-- End Big Picture -->
</div>{* End centering div *}
{if $picturecount==0}No images in this gallery.{/if} {* Message in case there are no images to be displayed. *}
<!-- Clearing div -->
<div style="clear:both;">
{if $returnlink} {* Again a link back to the Album index page - if there is one. *}
<p style="text-align: right; padding-top:2em;">
<span class="instructiontext">
<a href="{$returnlink}" title="Zurück zur Galerie-Auswahl">Zurück zur Galerie-Auswahl</a>
</span>
</p>
{/if}
</div>
<!-- End clearing div -->
{/if} {* Closing "if !$album" from above. *}
- Included javascript: simplegallery.js
I put this as an external js-file in the same directory as motiongallery.js
EDIT: Images and their thumbs must be placed within the same directory. If you want them in different directories, you'll need to customize line 2 of the function.
Code: Select all
/* CMSMS-Users: This file's path is supposed to be modules/Album/templates/db/js/ by default */
/*
SIMPLE GALLERY SCRIPT
by Caspar Huebinger, http://chariotweb.net
Author e-mail: mail@chariotweb.net
*/
function changePic (CurrSrc, CurrAlt, CurrTitle) { // set parameters
var BigSrc = CurrSrc.replace('thumb_','');// remove "thumb_" from img URI
var MainPic = document.getElementById('mainpic');// get big img
MainPic.setAttribute('src', BigSrc);// set new URI for big img
MainPic.setAttribute('alt', CurrAlt);// get alt-text containing the user-given name
MainPic.setAttribute('title', CurrTitle);// get title-text containing the user-given comment
var NewName = document.createTextNode(CurrAlt);// create new text-node for img name
document.getElementById('mainpicname').replaceChild(NewName, document.getElementById('mainpicname').firstChild);// replace img name
var NewComment = document.createTextNode(CurrTitle);// create new text-node for img comment
document.getElementById('mainpiccomment').replaceChild(NewComment, document.getElementById('mainpiccomment').firstChild);// replace img comment
}
Personal thoughts
I personally think it's legal to have the cmotion script in a module like Album by default, but if you want to be sure, please check the site which provides the original code (mentioned in the ***header*** for legal use).
Hopefully, this solves some issues everyone trying/using the template might have had. I'll be off duty for the weekend and will be able to answer posts from Monday on.
Looking forward to some feedback!
Thanks,
Caspar
