A simple implementation I did so that I can rotate images after they upload. It rotates both the thumbnail and full sized image.
In my controller that renders the image crud
function rotateimage($pkey){
$this->load->library('image_moo');
$basepath='assets/uploads/';
$images = $this->db->get_where('pictures', array('id'=>$pkey))->result();
if(!empty($images))
{
foreach($images as $row){
$filestring = $basepath.$row->url;
$filestringthumb=$basepath.'thumb__'.$row->url;
$this->image_moo->set_jpeg_quality('60');
$this->image_moo->load($filestring)->rotate('90')->save($filestring,true);
$this->image_moo->load($filestringthumb)->rotate('90')->save($filestringthumb,true);
$this->image_moo->set_jpeg_quality('60');
}
}
else{
//primary key not found
}
}
Then , under assets/image_crud/views/list.php I added this javascript:
<script type='text/javascript'>
$(function(){
$('.rotate-anchor').click(function(){
$.ajax({
url:$(this).attr('href'),
beforeSend: function()
{
//can show "wait" screen here
},
success: function(){
loadPhotoGallery();
}
});
return false;
});
});
</script>
Also, under assets/image_crud/views/list.php I also added this link to the thumbnails (under the foreach of ul showing the images:
<a href="<?php echo 'http://localhost/controller/rotateimage/'. $photo->$primary_key; ?>" class="rotate-anchor"> Rotate </a>
Finally.. I found out that after the rotating the thumbnails were not refreshing with the new rotated version so to force the refreshing of the thumbnail I added a random value to prevent it from being cached:
I switched this: <img src='<?php echo $photo->thumbnail_url?>' width='90' height='60' class='basic-image' /> to this: (to get it to refresh after being rotated) <img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' />
Also had to change this:
<a href='<?php echo $photo->image_url;?>' <?php if (isset($photo->title)) {echo 'title="'.str_replace('"',""",$photo->title).'" ';}?>target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' /></a>
To this:
<a href='<?php echo $photo->image_url.'?timestamp='.rand(1,3000);?>' <?php if (isset($photo->title)) {echo 'title="'.str_replace('"',""",$photo->title).'" ';}?>target='_blank' class="color-box" rel="color-box" tabindex="-1"><img src='<?php echo $photo->thumbnail_url.'?timestamp='.rand(1,3000); ?>' width='90' height='60' class='basic-image' /></a>
This will prevent caching of the normal size image incase they rotate it and they click the thumbnail to show the full size image
This will rotate both the thumbnail and the normal sized image by 90 degrees...
One problem I am having is that the thumbnails quality degrades if you rotate it alot, the normal sized image seems to not..