Hey cryha1 (is your name castro? I’m one of dickmann’s mates living in Melbourne!), are you still having this problem?
For you or anyone else that has this issue, I’ve worked out an unpretty way to solve it, just by loading the attached images within a hidden div. Very unsexy but it does the job. Hoping to improve on it but we’ll see.
What I’m doing on my site is loading the image thumbs then when a user clicks on one it loads the bigger image in a certain position with jQuery.
So my output for the gallery image thumbs is:
<div class="gallery-images">
<?php
$args = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
$attachments = get_posts($args);
if ($attachments) {
foreach ( $attachments as $attachment ) {
the_attachment_link( $attachment->ID , false );
}
}
?>
</div>
Then my pre-loading like this, obviously with the div “hidden” as display:none;
<div class="hidden">
<?php
$preArgs = array( 'post_type' => 'attachment', 'numberposts' => -1, 'post_status' => null, 'post_parent' => $post->ID );
$preAttachments = get_posts($preArgs);
if (count($preAttachments) > 1) {
foreach ( $preAttachments as $attachment ) {
the_attachment_link( $attachment->ID , true );
}
}
?>
</div>
Works nicely for me. If you’re interested in the image swap I’m doing, here it is:
//Swap Image on Click
$('.gallery-images a').click(function() {
var mainImage = $(this).attr("href"); //Find Image Name
$(".background-image img").fadeOut('slow', function(){
$(".background-image img").attr({ src: mainImage });
});
$(".background-image img").fadeIn('slow');
return false;
});
You can see the result here https://new.pdt.com.au/projects/gold-coast-low-cost-airport/ if you check before I launch the site, otherwise it will be here
https://www.pdt.com.au/projects/gold-coast-low-cost-airport/
