I've been trying to figure out for hours on how to make JQuery's .load()
work. Here is the full code - it is an external JS file:
$(document).ready(function() {
$(".loader a").hide();
$(".loader a").find("img").on("load", function() {
$(this).closest(".loader a").fadeIn("normal");
});
);
$(".loader a").hide();
works but the rest don't - the images don't show up and they still remain hidden. It is unlikely the cause but do you think it has something to do with the PHP-JSON code? I don't know. Hope you guys can help. Cheers!
<?php
$str_data = file_get_contents("portfolio/portfolio.json");
$json = json_decode($str_data, true);
shuffle($json['portfolio']);
foreach ($json['portfolio'] as $portfolio) {
echo "<div class='col-lg-3 col-md-4 col-xs-12 thumbnail portfolio-thumb'>";
echo "<div class='portfolio-thumb-img'>";
echo "<div class=\"loader\"><a href=\"", $portfolio["url"], "\"><img src=\"", $portfolio["main_image_url"], "\"></a></div>";
echo "<h3>", $portfolio["title"], "</h3>";
echo "<p>", $portfolio["category"], "</p>";
echo '</div>';
echo '</div>';
}
?>
That above code is a PHP include file and it is going to be merged with the header.php and footer.php.