Custom Gallery Template
Permalink
Hello. I am trying to make a custom Gallery template that uses DIV's instead of tables. An example output is
What do I need to modify the jQuery code at the bottom to to use the DIV format instead of the TD format. Here is the default jQuery call used.
<div id="file_86" class="galleryImages" style="width: 100px;height: 100px;float: left;"> <a href="/files/2612/3969/3787/DSC00012.jpg" title="DSC00012.jpg"><img class="ccm-output-thumbnail" alt="" src="/files/cache/c75131b0985cc8e13da567c7cc5f670d.jpg" width="100" height="75" /></a></div>
What do I need to modify the jQuery code at the bottom to to use the DIV format instead of the TD format. Here is the default jQuery call used.
$('td.galleryImages a').lightBox({
imageLoading: '<?php echo ASSETS_URL_IMAGES?>/throbber_white_32.gif',
imageBtnPrev: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-prev.gif',
imageBtnNext: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-next.gif',
imageBtnClose: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-close.gif',
imageBlank: '<?php echo $this->getBlockURL()?>/images/lightbox-blank.gif'
});
I tried that but when I click the thumbnail, it takes me directly to the image, it does not open a lightbox as it should.
Example can be viewed here:http://theberrygroupllc.com/gallery/113_parkview_lane/...
Example can be viewed here:http://theberrygroupllc.com/gallery/113_parkview_lane/...
Here is the current file
$('div.galleryImages a').click(function(){
imageLoading: '<?php echo ASSETS_URL_IMAGES?>/throbber_white_32.gif',
imageBtnPrev: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-prev.gif',
imageBtnNext: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-next.gif',
imageBtnClose: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-close.gif',
imageBlank: '<?php echo $this->getBlockURL()?>/images/lightbox-blank.gif'
});
unfortunately this did not work. I get this JS error in Firebug.
invalid label
http://theberrygroupllc.com/gallery/113_parkview_lane...
Line 111
invalid label
http://theberrygroupllc.com/gallery/113_parkview_lane...
Line 111
You want to open it with lightbox?
No lightbox is loaded on your website, or well I don't see it included.
Then the code won't work either.
But when you include the code this should work:
No lightbox is loaded on your website, or well I don't see it included.
Then the code won't work either.
But when you include the code this should work:
$('td.galleryImages a').click(
function()
{
$().lightBox(
{
imageLoading: '<?php echo ASSETS_URL_IMAGES?>/throbber_white_32.gif',
imageBtnPrev: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-prev.gif',
imageBtnNext: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-next.gif',
imageBtnClose: '<?php echo $this->getBlockURL()?>/images/lightbox-btn-close.gif',
imageBlank: '<?php echo $this->getBlockURL()?>/images/lightbox-blank.gif'
})
});
When using the default template it loads. You can compare files, (I uploaded the original view.php file). They are the same as far as I can tell except for the wrapping HTML(the table, tr's, and td's).
Not the solution, but part of the problem. When the Gallery Addon loads the default template from view.php, it automaticly loads the lightbox JS in the head. But if I tell it to use a Custom Template, it is not loading that file.
Franz, Andrew, any of of you guys, please help.
Franz, Andrew, any of of you guys, please help.
Yes that's pretty much a problem I can't help with. Dev team to the rescue?
I added the lines
at the beginning of my custom template for now. This is a sloppy fix and should not be handled this way but at least it works until the c5 team fixes the Addon.
<link rel="stylesheet" type="text/css" href="/packages/gallery/blocks/gallery/css/gallery.css" /> <link rel="stylesheet" type="text/css" href="/packages/gallery/blocks/gallery/css/jquery.lightbox-0.5.css" /> <script type="text/javascript" src="/packages/gallery/blocks/gallery/js/jquery.lightbox-0.5.pack.js"></script>
at the beginning of my custom template for now. This is a sloppy fix and should not be handled this way but at least it works until the c5 team fixes the Addon.
Any assets that are automatically loaded by a block (including items in the js/ and css/ directories, or view.js and view.css) can be completely separated for different custom templates. While that means complete freedom and flexibility for custom templates, it means that, if your original block's template requires js/ and css/ files to be auto-loaded (like this one does) your custom template is going to have to specify those as well.
So, to create a berry_style custom template, instead of creating templates/berry_style.php, I would make berry_style a directory, and copy all js/ and css/ directories into it as well. This will ensure that the same javascript and css is autoloaded when using this template, as when using the regular gallery view.
There is, however a bug here. Ideally, you -should- be able to create blocks/gallery/view.php in your web root, and put this code here, and still load lightbox and core style files, and that does not look like it works.
So, to create a berry_style custom template, instead of creating templates/berry_style.php, I would make berry_style a directory, and copy all js/ and css/ directories into it as well. This will ensure that the same javascript and css is autoloaded when using this template, as when using the regular gallery view.
There is, however a bug here. Ideally, you -should- be able to create blocks/gallery/view.php in your web root, and put this code here, and still load lightbox and core style files, and that does not look like it works.
Is there a way to invoke a file dependency include from within a custom template?
Something like:
(I am sure this solution would look nothing like this but it illustrates)
Thanks again. I look forward to seeing what you guys come up with.
Something like:
//This line will cause the lightbox javascript file from this Addon to be included in the header of the outputted HTML $this->loadjs("lightbox");
(I am sure this solution would look nothing like this but it illustrates)
Thanks again. I look forward to seeing what you guys come up with.
Let's say you have a custom template for the slideshow, which uses lightbox. Let's call this custom template "overlay".
In blocks/, creating a slideshow/ directory
In blocks/slideshow/, create a templates/ directory
In blocks/slideshow/templates/ create a overlay/ directory.
Then, add a js/ directory inside overlay/, and place lightbox.js, and any other javascript files inside it.
If you need a special CSS file for your custom template, you can also create a css/ directory in overlay/, or just create view.css (if you need just one css file).
Then, when you go into the custom template for the slideshow block, you should see "overlay" listed. If you choose this, the relevant JS and CSS files should automatically be included in the header of the page. You can include any number of CSS and JS files.
This feature is pretty new, so if you encounter unexplained behavior, we're probably aware of it ;-)
In blocks/, creating a slideshow/ directory
In blocks/slideshow/, create a templates/ directory
In blocks/slideshow/templates/ create a overlay/ directory.
Then, add a js/ directory inside overlay/, and place lightbox.js, and any other javascript files inside it.
If you need a special CSS file for your custom template, you can also create a css/ directory in overlay/, or just create view.css (if you need just one css file).
Then, when you go into the custom template for the slideshow block, you should see "overlay" listed. If you choose this, the relevant JS and CSS files should automatically be included in the header of the page. You can include any number of CSS and JS files.
This feature is pretty new, so if you encounter unexplained behavior, we're probably aware of it ;-)
thanks for the help btw. i hope this is an easy fix. I am surprised the c5 team used tables in the first place.
tomorrow.
-frz
-frz
thanks
There is still no fix for this. Custom template kills the js files in some way. Way?
to: