Hi goldsky,
First off, thanks again for all your work and for adding the smooth gallery effects. The sliding transition works well.
On the image tagging : I’m not sure where to add this either. I started hacking around the code a bit to see what I could do and didn’t make much progress. It’s almost like it should be enabled only during the viewing of a single image. What I had done with MaxiGallery was
- add the javascript calls to the top of a document template
- created three snippets : phototagging_function, phototagging_form and phototagging_form2
Noting that none of the code below is polished or working as intended :
The code for the "function" snippet was
<?php
global $modx;
//Function to sanitize values received from the form. Prevents SQL injection
function clean($str) {
$str = @trim($str);
if(get_magic_quotes_gpc()) {
$str = stripslashes($str);
}
return $str; //$modx->db->escape($str);
}
if($_POST['tag']) {
//Sanitize the POST values
$title = clean($_POST['title']);
$x1 = $_POST['x1'];
$y1 = $_POST['y1'];
$w = $_POST['w'];
$h = $_POST['h'];
$pic = $_GET['pic'];
//Insert tag into database. I am capturing more data than needed from a previous version but this could be useful oneday.
$qry = " INSERT INTO phototags (rec_id, title, x1, y1, x2, y2, width, height,pic) " .
" VALUES('', '".$title."', '".$x1."', '".$y1."', '".$_POST['x2']."', '".$_POST['y2']."', '".$w."', '".$h."', '".$pic."') ";
$result=$modx->db->query($qry); //MattC
} elseif($_GET['delete']) {
//Sanitize the POST values
$rec_id = clean($_GET['rec_id']);
$qry = " DELETE FROM phototags where rec_id = $rec_id "; //MattC
$result=$modx->db->query($qry); //MattC
}
return;
?>
The code for the "form" function was :
<?php
$pic = $_GET['pic'];
$output = '';
$output .= '<div class="start-tagging">Click here to start tagging</div><!-- class start tagging -->';
$output .= '<div class="finish-tagging hide">Click here to cancel tagging</div><!-- class finish tagging -->';
$output .= '<div class="image">';
$output .= ' <div id="title_container" class="hide">';
$output .= ' <form method="post" action="[~[*id*]~]?pic=' . $pic . '" >';
$output .= ' <!-- Grab the X/Y/Width/Height -->';
$output .= ' <input type="hidden" name="x1" id="x1" value="' . $x1 . '" />';
$output .= ' <input type="hidden" name="y1" id="y1" value="' . $y1 . '" />';
$output .= ' <input type="hidden" name="x2" id="x2" value="' . $x2 . '" />';
$output .= ' <input type="hidden" name="y2" id="y2" value="' . $y2 . '" />';
$output .= ' <input type="hidden" name="w" id="w" value="' . $w . '" />';
$output .= ' <input type="hidden" name="h" id="h" value="' . $h . '" />';
$output .= ' <input type="hidden" name="pic" id="pic" value="' . $pic . '" />';
$output .= ' <label for="title">Tag text</label><br />';
$output .= ' <input type="text" id="title" name="title" size="30" value="" maxlength="55" /><br />';
$output .= ' <input type="hidden" name="tag" value="true" />';
$output .= ' <input type="submit" value="Submit" class="" />';
$output .= ' </form>';
$output .= ' </div><!-- id title container -->';
return $output;
?>
And the code for the "form2" snippet was
<?php
global $x1, $y1, $x2, $y2, $w, $h;
$pic = $_GET['pic'];
$output = '';
$list_tags = array();
$qry = " SELECT rec_id, title, x1, y1, x2, y2, width, height FROM phototags WHERE pic=".$pic;
$results=$modx->db->query($qry) or die("Error retrieving record: " . mysql_error());
while ($row=$modx->db->getRow($results))
{
extract ($row);
$name = str_replace(' ', '-', $title);
$list_tags[] = array('rec_id' => $rec_id, 'title' => $title);
$output .= '<!-- Style for the tagged area -->';
$output .= '<style type="text/css">';
$output .= ' .map a.'.$name.' { border:1px solid #000; top:'.$y1.'px; left:'.$x1.'px; width:'.$width.'px; height:'.$height.'px; }';
$output .= ' .map a:hover.'.$name.' { border:3px solid #fff; }';
$output .= '</style>';
$output .= '<!-- Tags displayed as a list -->';
$output .= '<ul class="map">';
$output .= ' <li><a class="'.$name.'"><span><b>'.$title.'</b></span></a></li>';
$output .= '</ul>';
}
$output .= '</div><!-- class image -->';
//$output .= $qry.'<br />';
//$output .= 'Pic = '.$pic.' Rec id = '.$rec_id.' x1 = '.$x1.' w = '.$w.'<br />';
$output .= '<p>In this photo:';
foreach ($list_tags as $value)
{
$output .= "<a href='" . str_replace(' ', '-',$value['title']) . "'>" . $value['title'] . "</a> (<a href='[~[*id*]~]&pic=".$pic."&delete=true&rec_id=" . $value['rec_id'] . "'>Delete</a>) ";
}
$output .= '</p>';
return $output;
?>
The "function" code went just after the opening body tag in the document template. The "form" snippets were called in the template used by Maxigallery to display an image (the first one was called just after the opening "picture" tag and the last called just before the closing "picture" div tag). Where I ran into problems was in the positioning of the boxes relative to the placement of the image, which could change based on styling. Also, the "z-index" settings had to be adjusted relative to the CSS I was testing with, in order to get the text box for the area tag to be accessible.
In trying to adapt that to your code, I thought I could place it in a gallery template. But it looks like the code just gets offered up rather than parsed. So I added "$modx->runSnippet" commands to append the output but still did not get it work. Not having a very good idea of how your code is set up, I didn’t go any further.
I guess the issue is that the tagging ability *ought* to be available in any of the effects selected, but I don’t know how for example it would work in a popup/lightbox view. Also, it might be too problematic to try to figure out how to get it to work with the different gallery implementations.
If you’ve got any suggestions, I’m willing to try them out and report back.
Thanks again!
Matt
I think it has a great potential!
☆ A M B ☆
