public class JsonHelper
{
    public static string Serialize<T>(T obj)
    {
        var serializer = new DataContractJsonSerializer(obj.GetType());
        var ms = new MemoryStream();
        serializer.WriteObject(ms, obj);
        string retVal = Encoding.UTF8.GetString(ms.ToArray());
        ms.Dispose();
        return retVal;
    }

    public static T Deserialize<T>(string json)
    {
        T obj = Activator.CreateInstance<T>();
        var ms = new MemoryStream(Encoding.Unicode.GetBytes(json));
        var serializer = new DataContractJsonSerializer(obj.GetType());
        obj = (T)serializer.ReadObject(ms);
        ms.Close();
        ms.Dispose();
        return obj;
    }
}

Objektet som skall serialiseras behöver några extra taggar på sig ex:

[DataContract]
public class Person
{
    [DataMember(Name="firstName")]
    public string FirstName { get; set; }

    [DataMember(Name="lastName")]
    public string LastName { get; set; }
}

För att serialisera/deserialisera skriver man så här:

var myPerson = new Person()
{
    FirstName = "John",
    LastName = "Doe"
};

// Serialize
string json = JSONHelper.Serialize<Person>(myPerson);

// Deserialize
myPerson = JSONHelper.Deserialize<Person>(json);

Koden är i princip identisk med http://pietschsoft.com/post/2008/02/NET-35-JSON-Serialization-using-the-DataContractJsonSerializer.aspx. Jag har bara ändrat från default encoding till utf8.

No related posts.

Relaterade inlägg tack vare Yet Another Related Posts Plugin.

Jag hittade då ett problem där applikationen inte tar hänsyn till hur stora bilderna är relaterat till webbläsaren vilken ibland gjorde att inte hela bilderna syntes. När man använder dessa skript får man inte heller någon skrollbar så man kunde inte bläddra för att se hela bilden.

Enkelt löst tänkte jag och googlade vidare efter liknande applikation som gör just detta, men jag hittade inget bra och bestämde mig för att lösa detta själv.

Det som behöver göras är att lägga in ny funktionalitet i litebox-1.0.js för att ta hänsyn till storleken på webbläsarfönstret. Förändringen som behövs är liten och enkel att införa. Byt bara ut

imgPreloader.onload=function(){
	Element.setSrc('lightboxImage', imageArray[activeImage][0]);
	myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
}

mot

imgPreloader.onload=function(){
	Element.setSrc('lightboxImage', imageArray[activeImage][0]);

	var innerWidth = arrayPageSize[2];
	var innerHeight = arrayPageSize[3];

	if(imgPreloader.width>(innerWidth-100) || imgPreloader.height>(innerHeight-130)){
		if(imgPreloader.width>(innerWidth-100)){
			var width=(innerWidth-100);
			var height=imgPreloader.height/(imgPreloader.width/(innerWidth-100));
			if(height>(innerHeight-130) ){
				var height=(innerHeight-130);
				var width=imgPreloader.width/(imgPreloader.height/(innerHeight-130));
			}
		} else if(imgPreloader.height>(innerHeight-130)){
			var height=(innerHeight-130);
			var width=imgPreloader.width/(imgPreloader.height/(innerHeight-130));
		}

		height = Math.floor(height);
		width = Math.floor(width);

		document.getElementById('lightboxImage').height=height;
		document.getElementById('lightboxImage').width=width;
		document.getElementById('lightboxImage').style.width=width;
		document.getElementById('lightboxImage').style.height=height;
		myLightbox.resizeImageContainer(width, height);
	} else {
		document.getElementById('lightboxImage').height=imgPreloader.height;
		document.getElementById('lightboxImage').width=imgPreloader.width;
		document.getElementById('lightboxImage').style.width=imgPreloader.width;
		document.getElementById('lightboxImage').style.height=imgPreloader.height;
		myLightbox.resizeImageContainer(imgPreloader.width, imgPreloader.height);
	}
}

så skall det fungera.

Skillnaden mellan Litebox och Lightbox är liten och ligger främst i vilket bakomliggande JavaScript-ramverk som används, vilket gör att detta därför går att applicera på båda applikationerna.

No related posts.

Relaterade inlägg tack vare Yet Another Related Posts Plugin.