I have tried to find out why JSON is not working in Firefox all over this forum and
the internet. It works on tablets, ie, safari. It works on my desktop in firefox. It only does not work after uploading I've tried a few things (commented out), such as mimeType with no solution. I have tried using
the $.ajax with no better luck. Firefox had no javascript errors. I'm using jQuery 1.7.
Console.log is printing out
the data.
$(document).ready(function(){
jQuery.support.cors = true;
//$.ajaxSetup({ mimeType: "application/json" });
/*$.ajaxSetup({ scriptCharset: "utf-8" , contentType: "application/json; charset=utf-8"}); */
// loading pictures
$.getJSON("intro.json?format=json", function(data){
var links = '';
var imageload = '';
var
title = '';
console.log(data)
$.each(data, function(key, item){
links += ' <a href=' + item.image + '>' + key + '</a>';
imageload += '<img src="' + item.image + ' " />';
title += item.alt;
});
$('.introCon').html(imageload);
$('.introCon img').hide();
$('.introCon img:last').fadeIn(500);
$('.introCon img').fadeIn(1000);
rotatePics(2);
});
});
function rotatePics(currentPhoto) {
var numberOfPhotos = $('.introCon img').length;
currentPhoto = currentPhoto % numberOfPhotos;
$('.introCon img').eq(currentPhoto).fadeOut( function() {
// re-order
the z-index
$('.introCon img').each(function(i) {
$(this).css(
'zIndex', ((numberOfPhotos - i) + currentPhoto) % numberOfPhotos
);
});
$(this).show();
setTimeout(function() {rotatePics(++currentPhoto);}, 3000);
});
}
Here is
the simple JSON from a separate file.
{
"1" : {
"image" : "portfolio/chrpic.png",
"alt" : "Blah.",
"detail": "Quartz"},
"2" : {
"image" : "portfolio/mysspic.png",
"alt" : "Landing page.",
"detail": "Container"},
"3" : {
"image" : "portfolio/decode-pic3.png",
"alt" : "Decode this.",
"detail": "Landing page 2"},
"4" : {
"image" : "portfolio/simple-think-pic.png",
"alt" : "Simple Think",
"detail": "simpilify your life"}
}
