Ok i have successfully implement gallery in my page, actually been a little long winded as had to devise a way to show a thumbnail for the gallery albums list which i have done using getresources, so you click on the get resources link which takes you to the individual gallery page. no on this page i can place the thumbnails easy enough but i want to open colorbox to show the larger image.
my call on my resource page is:
[[!Gallery? &album=`[[*pagetitle]] &thumbTpl=`GalColorBoxItem` &toPlaceholder=`gallery` ]]
and my chunk tpl is;
<div class="[[+cls]]">
<a href="[[+image]]" rel="galerie" title="[[+name]]">
<img class="[[+imgCls]]" src="[[+thumbnail]]" alt="[[+name]]" />
</a>
</div>?
This displays the thumbnails but does nothing when you click on them...just refreshes the thmbnails, there seems to be an error on the page too on line 13...
Please help this is driving me quite mad and have hit a total wall....
many thanks in advance.
[[+gallery]]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<!-- colorbox -->
<link type="text/css" media="screen" rel="stylesheet" href="manager/templates/js/css/colorbox/example1/colorbox.css" />
<script src="manager/templates/js/js/jquery-1.4.3.js"></script>
<script src="manager/templates/js/colorbox/colorbox.js"></script>
<script>
$(document).ready(function(){
//Examples of how to assign the ColorBox event to elements
$("a[rel='galerie']").colorbox();
});
</script>
<!-- end colorbox -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Surtio Orgatec 2010</title>
<link href="manager/templates/mytemplates/newcss.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="/modx-2.0.4-pl2/assets/components/gallery/css/web.css" type="text/css" />
</head>
<body>
<div id="wrap2">
<div id="header">
<div id="nav">
<!--closes nav --></div>
<div id="contentplace">
<div id="topnavcontainer"><ul class="topnavcontainer"><li class="first"><a href="index.php?id=2" title="Recruitment" >Recruitment |</a></li><li class="active"><a href="index.php?id=3" title="Events" > Events | </a></li><li class="last"><a href="index.php?id=4" title="Consultancy" > Consultancy</a></li></ul></div>
<div id="recruitsubmenu2"><ul class="recruitsubmenu2"><li class="first"><a href="index.php?id=16" title="About Events" >About |</a></li><li class="recruitsubmenu2"><a href="index.php?id=17" title="Services & Hire" > Services & Hire |</a></li><li class="active"><a href="index.php?id=25" title="Gallery" > Gallery |</a></li><li class="recruitsubmenu2"><a href="index.php?id=18" title="Your Event" > Your Event |</a></li><li class="recruitsubmenu2"><a href="index.php?id=19" title="Contact" >Contact |</a></li><li class="last"><a href="index.php?id=20" title="Our Next Event" > Our Next Event |</a></li></ul></div>
<a href="index.php?id=1"><div id="logo"> </div></a>
<div id="eventgalleryhold">
<div class="gal-item">
<a href="index.php?id=35&galItem=23&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7023.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=24&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7027.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=25&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7029.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=26&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7043.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=28&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7081.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=30&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7093.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=29&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7091.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=31&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7108.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=32&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7120.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=33&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7144.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=34&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7156.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=35&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7158.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=36&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7160.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=37&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7191.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=38&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7202.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=39&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7203.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=40&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7211.jpg" alt="" />
</a>
</div><div class="gal-item">
<a href="index.php?id=35&galItem=41&galAlbum=5&galTag=">
<img class="" src="/modx-2.0.4-pl2/assets/components/gallery/connector.php?action=web/phpthumb&w=100&h=100&zc=1&far=1&src=%2Fmodx-2.0.4-pl2%2Fassets%2Fcomponents%2Fgallery%2Ffiles%2F2010%2F11%2Fimg_7246.jpg" alt="" />
</a>
</div>
</div>
<div style="clear:both;"></div>
</div>
<!--closes content--></div>
<div id="footer">
<div id="footerholder">
<div id="foot1"><h3>Latest News</h3><p></p><p></p><p></p></div>
<div id="foot2"><h3>Latest Jobs</h3><p></p><p></p><p></p></div>
<div id="foot3"><h3>Contact Us</h3>
<p><a href="mailto:[email protected]">[email protected]</a></p><p>Tel: 020 8361 2157</p>
<a href="http://www.facebook.com/pages/Surtio/164764716881536" target="_blank"><div id="thumby1"><img src="manager/templates/mytemplates/images/facebook_64.png" width="64" height="64" /></div></a>
<a href="http://twitter.com/Surtio#" target="_blank"><div id="thumby2"><img src="manager/templates/mytemplates/images/twitter_64.png" width="64" height="64" /></div></a>
<a href="http://www.linkedin.com/companies/surtio" target="_blank"><div id="thumby3"><img src="manager/templates/mytemplates/images/linkedin_64.png" width="64" height="64" /></div> </a>
</div>
<div id="foot4"><h3>About Surtio</h3><p>Our approach remains constant within all 3. We use a honest direct approach to help companies and individuals move forward in their market sector.</p></div>
</div><div style="clear:both;"></div>
<div id="bott">Surtio Limited Registered in England & Wales-Company No: 6612134 Registered office address: 114 Derwent Avenue, London, EN4 8LZ</div>
</div><!-- clsoing tag for footerholder -->
</div><!--closing tage for footer -->
<!--closes wrap--></div>
</body>
</html>
