4images Forum & Community

4images Modifications / Modifikationen => Mods & Plugins (Requests & Discussions) => Topic started by: BC_Man on December 15, 2009, 02:24:11 AM



Title: [MOD] Fancybox gallery for each category
Post 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 ...

1
class="group" rel="group"

... like this ...

1
2
3
4
5
6
7
8
9
<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.


Title: Re: Request: List images in category directory as links on details page (Fancybox)
Post by: BC_Man on December 23, 2009, 03:16:02 PM
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 ...

1
2
3
4
5
6
7
8
9
<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.

1
2
<!-- 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 ...

1
"prev_thumb_file" => $prev_thumb_file

Add these two lines after it ...

1
2
//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 ...


After line 250 ...


Add this ....

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- 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.


Title: Re: [MOD] Fancybox gallery for each category
Post by: GaYan on January 16, 2010, 01:44:48 PM
wooooh.. thanks bro... helps lot  :wink: