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"}
}
