4images Forum & Community
4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: BC_Man on December 15, 2009, 02:24:11 AM
-
Now a MOD - see next message.
Hello,
I've searched and read the FAQ and studied some PHP and templates but I can't see how to do this.
This is on my site, gallery.djbarney.silentflame.com, so that I can use a Fancybox gallery, fancybox.net/example. Fancybox requires all the links to the images that you want it to include in a gallery to have ...
class="group" rel="group"
... like this ...
<strong>Image gallery</strong>
<br />
<a class="group" rel="group" title="Group title #1" href="/data/4_b.jpg"><img src="/data/4_s.jpg"></a>
<a class="group" rel="group" title="Group title #2" href="/data/5_b.jpg"><img src="/data/5_s.jpg"></a>
<a class="group" rel="group" href="/data/6_b.jpg"><img src="/data/6_s.jpg"></a>
The problem is actually listing on the page all the links to each image in the category directory. They would need to be hidden as well. I would guess that this is quite a trivial piece of PHP, I just don't know PHP well enough. Thanks.
-
As always make backups before you make any of these alterations.
I managed to fix something up myself xxx: gallery. djbarney. silentflamexxx: /details. php?image_id=1620 , no mean feat since I know very little PHP. Look at the page source to see the links added, bottom of page. It is based on a 1.7.7 install. Line numbers may vary if you have installed other mods. Installation at your own risk, I can accept no responsibility for data loss or security problems.
Moderators and/or experienced PHP users - is my code correct / secure ? Thanks.
1. Install Fancybox xxx: fancybox. net into 4images. Alter "header.html" template to include Fancybox ...
<script type="text/javascript" src="jquery.fancybox/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jquery.fancybox/jquery.fancybox-1.2.6.pack.js"></script>
<script type="text/javascript">
<!--
$(document).ready(function() {
$("a.gallery").fancybox();
});
// -->
</script>
See here for more help xxx: groups. googlexxx: /group/fancybox/browse_thread/thread/45056ac7f0a71f02
2. Make sure all relevant media templates have "rel=" and "category=" elements.
<!-- Template file for JPG Files -->
<a rel="group" class="gallery" href="{media_src}"><img src="{media_src}" border="1" alt="{image_name}" title="Click to view this image in the category gallery (resizes large images to the window)"{width_height} /></a><br />
3 Go to line 247 of details.php, search for ...
"prev_thumb_file" => $prev_thumb_file
Add these two lines after it ...
//Fancybox Mod - Barney Holmes, 2009, http://djbarney.org - Set category ID for use in details html template
"category_id" => $cat_id
4. Now find the file details.html - it will be in your template directory in whatever theme directory you are using - mine is in default. Go to line 250 or search for ...
{footer}
After line 250 ...
</table>
Add this ....
<!-- Fancybox Mod - Barney Holmes, 2009, http://djbarney.org - Set category ID for use in details html template -->
<div style="display:none;"> <!-- Hidden div layer not strictly necessary but thought I'd leave it in to be safe -->
<?php
$dir="data/media/{category_id}"; // The category directory variable set in details.php
if ($dir_list = opendir($dir))
{
while(($filename = readdir($dir_list)) !== false)
{
if (($filename == '.')||($filename == '..')) // Exclude unix special files.
{
}
else
{
?> <a rel="group" class="gallery" href="<?php echo $dir.'/'.$filename; ?>"></a> <?php
}
}
closedir($dir_list);
}
?>
</div>
That's it. This makes hidden links at the end of the details page that Fancybox uses. If you have Fancybox installed correctly then you should have a gallery for all media in the category with hover sensitive left and right arrows once you click on the details image.
Idea for next version: Provide a link from whatever image is being viewed in the Fancybox gallery back to it's details page.
-
wooooh.. thanks bro... helps lot :wink: