I am using the code below for users to select a thumbnail from a PHP array of images in a form. I am trying to figure out a way so that when the user submits the form this is on, which ever image is displayed currently will be passed through the form to the PHP Post. I'm not sure how to do this. Logically think of it as, if image[1] is active, I want to send that url to the form. Currently, the PHP var $knoteImgs[] are full tags, if I need to put the img tag in the JS it may be cleaner to obtain the URL.
<script type="text/javascript">
var image = new Array(3)
image[1]="<? echo $knoteImgs[0]; ?>"
image[2]="<? echo $knoteImgs[1]; ?>"
image[3]="<? echo $knoteImgs[2]; ?>"
var num = 1;
document.getElementById('next').addEventListener('click', function(galleryNext){
num=num+1
if (num==4)
{num=1}
document.getElementById('knoteImg').src=image[num];
});
document.getElementById('back').addEventListener('click', function(galleryPrevious){
num=num-1
if (num==0)
{num=3}
document.getElementById('knoteImg').src=image[num];
});
</script>
Edit: if anyone could even link me to some relevant posts that would be useful. In not sure what to search for.
Edited my original post to show working code: Thanks to @GaryHayes and @Brad for the assistance!
<script type="text/javascript">
var image = <?php echo json_encode($knoteImgs); ?>;
var tot = image.length;
var c = 0; // current image (array key index)
function loadImage(){
$("<img/>").attr({src:image[c], id:"knoteImg", class:"img-thumbnail"}).load(function() {
$('#thumbnail').html( this );
});
}
loadImage(); // load 1 image
$('#prev, #next').click(function(){
id= this.id==='next' ? c++ : c-- ;
c= c==-1 ? tot-1 : c%tot ;
loadImage();
});
function getimage() {
document.getElementById('currentimage').value = document.getElementById('knoteImg').src;
var thumbnail = document.getElementById('currentimage');
alert(thumbnail.value);
}
</script>
alert(thumbnail.value); is triggered by:
<input type="hidden" id="currentimage" name="currentimage" />
<input type="submit" onclick="getimage();" value="Submit" />
var image = <?php json_encode($knoteImgs); ?>;instead.