I'm trying to customize autofocus pro theme gallery. I would like to have a navigation similar to facebook's albums. Now the situation is like this:
http://paolofornaseri.com/2010/09/20/la-vendemmia-su-poggio-lungo/i-vigneti-di-poggio-lungo-vendemmia-morellino-di-scansano-2010-14/
I would like to give the possibility of view the next image by clicking on the image is displayed at the moment.
The file that needs to be modified should be image.php, and I believe that the row to change is the one I've pasted below, which is the one that put the image in the page, but without any link associated.
<?php echo wp_get_attachment_image( $post->ID, 'single-post-thumbnail'); ?>
Moreover a minor question. Is it possible to open the new image page at the same height of the previous page? and is it possibile to make display the image only when is completely downloaded?
Thanks in advance :)
Jimish Gamit answers:
$att_img = wp_get_attachment_image($attachment->ID, array($size, $size), false); // gives <img src="...." />
$att_src = wp_get_attachment_url($attachment->ID); // gives url to original size
$att_src_thumb = wp_get_attachment_image_src($attachment->ID, array($size, $size), false); // gives url to given size..
so use wp_get_attachment_image($attachment->ID, array($size, $size), false); now, you already hard coded <strong>$size</strong> so, every image gonna open with same size
and for your second question you can do something like below
<img id="current_image" src='CURRENT_IMG_SRC'>
<img id="next_image" style='display:none' src='NEXT_IMG_SRC'>. NOTE: It's hidden :)
Update, this image when user click on current image with next image using AJAX. Now, excute below code on your completion of AJAX request, it will check that image is loaded or not
#Javascript code
<script language='javascript'>
var img_loaded = false;
function isImageLoaded(){
set_time_out_var = setTimeout("isImageLoaded()",100);
if(!img_loaded){
$('#next_image').load(function() {
<strong> //Update you MAIN image here
document.getElementById('CURRENT_IMG_SRC').src='..';</strong>
img_loaded = true;
}
}
}
</script>
anrof comments:
when I posted the question I have forgotten the link to my website to show the actual situation.
[[LINK href="http://paolofornaseri.com/2010/09/20/la-vendemmia-su-poggio-lungo/i-vigneti-di-poggio-lungo-vendemmia-morellino-di-scansano-2010-14/"]][[/LINK]]
Anyway, I don't understand how you are trying to solve the main problem.
I'm currently using wp_get_attachment_image to display the image, but I would like to add a link to the image to open the next photo.
For the second question, I should only paste the code in the file image.php or I have to change something?
Jimish Gamit comments:
$att_img = wp_get_attachment_image($attachment->ID, array($size, $size), false);
gives you <img src.....>
simply put
<a href='javascript:void(0)' onClick='javascript:updateImg();'><? echo wp_get_attachment_image($attachment->ID, array(500,400), false); ?> </a>
now did u get ? i will explan you second one but lets try first this
anrof comments:
I put the code but now there is only another time the same image displayed below the first.