{source}
<?php $year = 2021; ?>
<?php
#JHtml::_('jquery.framework', false);
?>
<script>
// https://www.mysite4u.net/joomla-articles/jquery-ajax-call-joomla.html
// https://stackoverflow.com/questions/4545081/how-to-do-file-upload-using-jquery-serialization
function showCategory( category, content ) {
//alert( “category: ” + JSON.stringify(category , undefined, 2) + “\n” +JSON.stringify(content, undefined, 2) );
template = jQuery(“#categoryTemplate”).clone();
template.find(‘#myCategory’).text( category );
for (var key in content) {
var obj = content[key];
pic = jQuery("#imageTemplate ").clone();
pic.find('#myImage').html( '<img width=100% style="border:2px solid slateGray;" src="' + obj.imageMediumResolution + '" alt="' + obj.basename + '" title="' + obj.basename + '" >');
titleEnd = obj.caption.indexOf('.');
myCaption = ‘<span style=”font-weight: bold;color: blue;text-align:center;”>’;
if ( titleEnd >= 0 ) {
myCaption += obj.caption.substring(0, titleEnd) + “</span>”;
if (content.caption.length > titleEnd)
myCaption += “<br/>” + obj.caption.substring(titleEnd+1, obj.caption.length);
} else
myCaption += obj.caption + “</span>”;
pic.find('#myCaption').html( myCaption );pic.find('#myAuthor').html( '<span style="text-align:right;color:SlateGray;">[' + obj.author + ']</span>' );
template.find('#display').append(pic);
} jQuery(‘#display’).append( template )
}
function doShowPic( node ) {
alert( "Node: " + node );
myCaption = ‘<span style=”font-weight: bold;color: blue;text-align:center;”>’;
if ( titleEnd >= 0 ) {
myCaption += response.caption.substring(0, titleEnd) + “</span>”;
if (response.caption.length > titleEnd)
myCaption += “<br/>” + response.caption.substring(titleEnd+1, response.caption.length);
} else
myCaption += response.caption + “</span>”;
jQuery(‘#myCategory’).text( response.category);
jQuery(‘#myCaption’).html( myCaption );
jQuery(‘#myAuthor’).html( ‘<span style=”text-align:right;color:SlateGray;”>[‘ + response.author + ‘]</span>’ );
html = ‘<img width=90% style=”border:2px solid slateGray; display: block; margin-left: auto; margin-right: auto;” src=”‘ + response.imageMediumResolution + ‘?n=’ + n + ‘” alt=”‘ + response.basename + ‘” title=”‘ + response.basename + ‘” >’;
jQuery(‘#myImage’).html( html );
}
function doShowNumberedPics() {
content = new FormData();
content.append( ‘event’, ‘castoff-photo’ );
content.append( ‘year’, 2021 );
jQuery.ajax(
{ url: ‘/bin/getImageJson.php’,
enctype: “multipart/form-data”,
type: ‘POST’,
dataType: ‘JSON’,
data: content,
async: true,
processData: false,
contentType: false,
success: function( response, status, jqXHR ){
//alert( “Response: ” + response + “\nStatus: ” + status );
//alert( response.imageMediumResolution );
if ( response.error != “” ) {
alert ( “Error saving file: ” + response.error + “\n\nPlease email info\@gxsa.org.uk“ );
return;
}
var d = new Date();
var n = d.getTime();
var n = d.getTime();
try {
for (element in response.category)
showCategory( element, response.category[ element ] );
} catch (err ) {
alert( “Error: ” + err );
}
},
error: function (xhr, desc, err) {
alert( “Error on ajax call: ” + err + ” ” + desc);
}
}
);
//alert (“Sent”);
}
</script>
{/source}
Cast-Off {source}<?php print $year; ?>{/source} Photo Competition Images
{source}
<div id=display>
</div>
<div id=categoryTemplate style=”float:left;width=100%; border: 5px solid green;”>
<h1 id=myCategory></h1>
<div id=display>
</div>
</div>
<div id=imageTemplate style=”width: 30%;float:left;height:200;border:1px solid pink;margin: 5px;padding:3px;align:center;”>
<span id=myImage></span><br/>
<span id=myCaption style=”text-align: center;”></span><br/>
<span id=myAuthor></span><br>
</div>
<div style=”clear:both;”/>
<script>
doShowNumberedPics();
</script>
{/source}