JSON image viewer not working in firefox

Posted by jarga on Stack Overflow See other posts from Stack Overflow or by jarga
Published on 2012-11-20T22:25:38Z Indexed on 2012/11/20 23:01 UTC
Read the original article Hit count: 158

Filed under:
|
|
|
|

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

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about JSON