@goldsky : Thanks very much for the code snippet you provided. Here’s where I am so far :
<?php
$ssParams = $this->_getSlideShowParams();
$ssFiles = $this->_getSlideShowFiles();
$modx->regClientStartupHTMLBlock('
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style type="text/css">
#actioninfo {
width: 400px;
background: gray;
color: white;
overflow:auto;
}
.drag {
position:relative;
display:block;
float: left;
width: 400px;
}
#sortlist {
width: 400px;
height: 135px;
background: gray;
color: white;
overflow:auto;
}
.listitem {
position:relative;
display:block;
float: left;
list-style-type: none;
height: 130px;
width: 130px;
background: green;
text-align: center;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$(".drag > div").draggable({
helper:"clone",
cursor: "move",
connectToSortable:"#sortlist"
});
$("#sortlist").sortable({
cursor: "move"
});
$("#updatelist").click(function () {
var order = $("#sortlist").sortable("toArray");
$("#actioninfo").load("index.php?id=58&"+Math.random()*99999+"&outlist="+order);
});
});
</script>
');
$output = '';
$output .='<div>
Select from these by dragging ...</div>';
$imgs = $ssFiles['src'];
$output .= "<div class='drag'>";
foreach ($imgs as $k => $v) {
$output .= "
<div id='" . $v . "' class='listitem'>
<img src='" . $v . "' title='".$v."' />
</div>
";
unset($imgs[$k]);
}
$output .= "</div>";
$output .= '<div>...and dropping here :<br/>
<div id="sortlist"></div>
<div id="updatelist"><input type="submit" value="Update"></div>
<!--<div id="clearlist"><input type="submit" value="Update"></div>-->
<div id="actioninfo">PHP output will show up here</div>
</div>
';
echo $output;
?>
Snippet call :
[ ! easy2? &slideshow=`sortable` &gid=`1` &ss_limit=`5` &ss_orderby=`random` ! ]
The document that is called uses a blank template and only has a call to a snippet, like this :
And the snippet getlist loops through the array passed from "sortable" and - for now - outputs examples of SQL calls that could be used to update a database. I drew heavily from the work found here
http://www.wil-linssen.com/musings/entry/extending-the-jquery-sortable-with-ajax-mysql/
So what this is supposed to do is allow for the selection and ordering of a set of images by dragging and dropping, after which they’ll be glued together into one image.
Here are a few questions I’ve got, most of which are jQuery oriented, I guess.
How select thumbnails from gallery using a checkbox and then create image pool from that?
How remove from drop area?
How limit drop area content to, say, 3 images?
How glue together into one image?
How clear drop area to start over with existing selection of images?
Relevant to E2G, though, would be a) how can I feed a gallery grid/list to this and b) is there any utility already available in E2G (or MODX) that would help be glue the images together? (I know in the E2G manager you have some editing/resizing ability.)
Alternatively, having perhaps a better idea of what I’m trying to accomplish, is there an easier way to do it with what is in E2G???
Any thoughts would be appreciated. I wouldn’t say I’m stuck in any particular spot yet as needing a sounding board.
TIA,
Matt
EDIT : Looks like PHP’s GD functions might do the trick re: gluing images together .....
☆ A M B ☆
