SOME SUCCESS FINALLY!!!
Starting from scratch, use all the original clean files for maxigallery and coda slider 2...
pictureTpl chunk:
<center>[+maxigallery.managebutton+]</center><br />
<div class="panel">
<div class="panel-wrapper">
<h2 class="title">[+maxigallery.picture.filename+]</h2>
<p>
<img src="[(base_url)][+maxigallery.path_to_gal+][+maxigallery.picture.filename+]" />
</p>
</div></div>
gallerypictureTpl chunk:
[+maxigallery.picture.title:htmlent+]
outergalleryTpl chunk:
In the template:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- Begin Stylesheets -->
<link rel="stylesheet" href="assets/snippets/maxigallery/codaslider/stylesheets/reset.css" type="text/css" media="screen" />
<link rel="stylesheet" href="assets/snippets/maxigallery/codaslider/stylesheets/coda-slider-2.0.css" type="text/css" media="screen" />
<!-- End Stylesheets -->
<!-- Begin JavaScript -->
<script type="text/javascript" src="assets/snippets/maxigallery/codaslider/javascripts/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="assets/snippets/maxigallery/codaslider/javascripts/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="assets/snippets/maxigallery/codaslider/javascripts/jquery.coda-slider-2.0.js"></script>
<script type="text/javascript">
$().ready(function() {
$('#coda-slider-1').codaSlider();
});
</script>
</head>
<body class="coda-slider-no-js">
<noscript>
<div>
<p>Unfortunately your browser does not hava JavaScript capabilities which are required to exploit full functionality of our site. This could be the result of two possible scenarios:</p>
<ol>
<li>You are using an old web browser, in which case you should upgrade it to a newer version. We recommend the latest version of <a href="http://www.getfirefox.com">Firefox</a>.</li>
<li>You have disabled JavaScript in you browser, in which case you will have to enable it to properly use our site. <a href="http://www.google.com/support/bin/answer.py?answer=23852">Learn how to enable JavaScript</a>.</li>
</ol>
</div>
</noscript>
<div class="coda-slider-wrapper">
<div class="coda-slider preload" id="coda-slider-1">
[!MaxiGallery? &disable_js_libs=`true` &max_pic_size=`800 x 533` &pictureTpl=`codapicture` &gallerypictureTpl=`codagallerypicture` &outergalleryTpl=`codaoutergallery` &display=`embedded` &embedtype=`codaslider` !]
</div></div>
[*content*]
</body>
</html>
My test page for this:
http://www.markojokic.com/evolutiontests/index.php?id=4
Basically, it was all about the templates, special thanks to photowebmax for a few guiding and words and inspiration as a fellow non-programmer.
The embedtype was named "codaslider" arbitrarily. It does not refer to any actual embed type, but it did the trick so far.
I changed 2 original files:
"jquery.coda-slider-2.0.js"
line 11:
$(".coda-slider").children('.panel').hide().end().prepend('<p class="loading">Loading...<br /><img src="assets/snippets/maxigallery/codaslider/images/ajax-loader.gif" alt="loading..." /></p>');
Just to make the loader be found in the right path where I put codaslider.
"coda-slider-2.0.css"
line 25:
.coda-slider-wrapper.arrows .coda-slider, .coda-slider-wrapper.arrows .coda-slider .panel { width: 840px }
I made the width 840 because most of my images are 800 wide and there is 20px of padding on each side, atleast the way it was designed to be.
Maybe now we can go back to tweaking the maxigallery files to get some extra parameters for Coda Slider itself. A further addition I would like is to have the tabs that have file names be thumbnails instead, and css them to the bottom instead of the top.
ADDITIONAL THING I FORGOT WHEN I FIRST POSTED THIS:
Modified the gallerypicturetpl.html file that goes in "templates" folder. here it is below:
