Jquery vill inte dra igång

Har gjort mina första försök att fixa ihop något med Jquery som inte är helt färdigt. Det jag vill åstakomma är att visa en preload-bild när ett gäng thumbnails visas, de hämtar jag in antingen från en databas eller XML (tar det senare när själva basfunktionen fungerar).
Har hittat en sida som beskriver det jag är ute efter rätt så väl men jag lyckas inte få igång det, verkar som att scriptet aldrig startar. Vet inte om det är något enkelt anrop jag har missat? Jag vill ju att det ska köras direkt när sidan laddas.

Min kod:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<style type="text/css">
ul#photo { margin:0; padding:0; }
ul#photo li { float:left; margin:0 5px 0 0; width:250px; height:250px; list-style:none; }
ul#photo li.loading { background: url('@Href("~/Content/Images/ImageLoader.gif")') no-repeat center center; }
</style>

<script>
$(document).ready(function ()) {
 alert("test");
// image source
var images = new Array();
images[0] = '@Href("~/Content/Images/Photos/thumb_spaten.jpg")';
images[1] = '@Href("~/Content/Images/Photos/thumb_studio_04.jpg")';
images[2] = '@Href("~/Content/Images/Photos/thumb_studio_05.jpg")';
 
$(images).each(function(index,value){
// create the LI programatically
var list = $('<li id="photo_'+index+'"></li>').attr('class','loading');
// append the new LI to UL
$('ul#photo').append(list);
// current LI object
var curr = $("ul#photo li#photo_"+index);
// new image
var img = new Image();
// load image
$(img).load(function () {
$(this).css('display','none'); // since .hide() failed in safari
$(curr).removeClass('loading').append(this);
$(this).fadeIn();
}).error(function () {
$(curr).remove();
}).attr('src', value);
});
</script>

<h1>Photography</h1>

<ul id="photo">

</ul>

Indentera din kod

du har skrivit fel på raden:

$(document).ready(function ()) {

du har en ) för mycket där:

$(document).ready(function () {

Ett tips är att köra en kortare version av dom-ready metoden ovan:

$(function() {});

istället.

sen curr behöver du inte hämta ut du har ju redan en referens till den i list.

sen en array kan du skriva på ett vettigare sätt:

var images = ["bild1","bild2"];

prova:

$(function () {
	// image source
	var images = [
		'http://www.webforum.nu/images/wfstandard/logo_webforum.gif',
		'http://www.webforum.nu/image.php?u=2129&dateline=1182278972',
		'http://www.webforum.nu/images/wfstandard/logo_webforum.gif'
	];
 
	$(images).each(function(index,value){
		// create the LI programatically
		var listItem = $('<li id="photo_'+index+'"></li>').attr('class','loading');

		// append the new LI to UL
		$('ul#photo').append(listItem);

		// new image
		var img = new Image();

		// load image
		var $img = $(img)
			.css('display','none')
			.attr('src', value)
			.load(function () {
				listItem.removeClass('loading').append(this);
				$img.fadeIn();
			}).error(function () {
				listItem.remove();
			});
	});
});

tror skall fungera.

Att göra den lite mer effektiv så hade jag skippat att köra jquery.each metoden och kört en vanlig for-loop.

Tack som ***, fungerade perfekt med en gång! :D

Vet du om det går att optimera koden för återanvändning? Jag ska lista ett antal olika bildkategorier och skulle gärna vilja kunna skriva en enkel rad kod för att anropa funktionen som sen hämtar bilderna via XML. Vet inte hur det fungerar/skrivs med JQuery men <%=visabilder(kategori)%>, förstår du vad jag menar? Så jag slipper skriva om hela koden för varje. :)

Just det, hur gör jag bilden till en länk?
Ex: <a href="images/gallery/spaten.jpg" rel="content" class="contentimg" title="">, de egenskaperna behöver jag ange.

Mika3l skrev:

Tack som ***, fungerade perfekt med en gång! :D

Vet du om det går att optimera koden för återanvändning? Jag ska lista ett antal olika bildkategorier och skulle gärna vilja kunna skriva en enkel rad kod för att anropa funktionen som sen hämtar bilderna via XML. Vet inte hur det fungerar/skrivs med JQuery men <%=visabilder(kategori)%>, förstår du vad jag menar? Så jag slipper skriva om hela koden för varje. :)

Ja, det skall ju helt klart gå

enklast hade varit att använda dig av en array med objekt istället för strängar för att skapa a-element med dina önskade värden också.

var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

Borde väl bara vara att klämma in <a> där? Men hur får jag länken klickbar när bilden läggs som bakgrund via css? display:block eller något åt det hållet?
Hur gör jag om arrays så jag får multipla värden i varje? Behöver ju bildens namn och ev titel som dynamiska värden.

skapa ett objekt istället för en sträng:

[
    {url: 'bild_url', link: 'http://...'},
    {url: 'bild_url', link: 'http://...'},
    {url: 'bild_url', link: 'http://...'}
]

och då bli value inte en sträng utan ett objekt, så för att få ut url: value.url

du kan enkelt använda dig av jquery .wrap metod för att wrappar din $img med ett a:

$img.wrap("<a/>").parent().attr("href",url)

du behöver inte göra mycket mer än så eftersom a-elementet kommer ta upp klick-ytan som bilden tar.

Ok, testade lite men nu kommer inga bilder fram :)

var images = [
    { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0120.jpg")', title: 'test1' },
    { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0067.jpg")', title: 'test2' },
    { url: '@Href("~/Content/Images/Photo/thumb_tryck_mode_110217_0007.jpg")', title: 'test3' }
]

        $(images).each(function (index, value) {
            // create the LI programatically
            var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

            // append the new LI to UL
            $('ul#photo').append(listItem);

            // new image
            var img = new Image();

            // load image
            var $img = $(img)
            .wrap("<a/>").parent().attr("href", url, "title", title)
			.css('display', 'none')
            .addClass('thumbnail')
			.attr('src', value)
			.load(function () {
			    listItem.removeClass('loading').append(this);
			    $img.fadeIn();
			}).error(function () {
			    listItem.remove();
			});
        });
    });

redigerade inlägget, value bli inte en sträng längre utan ett objekt

value.url, value.title måste du använda.

ändra även:

.wrap("<a/>").parent().attr("href", url, "title", title)

till:

.wrap("<a/>").parent().attr("href", url, "title", title).end()

du vill inte ha a-elementet som referens på $img utan du vill ha bilden.

tror inte attr() klarar att skriva på det sättet du gör det heller, skrev om koden lite:

$(function () {
    var images = [
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0120.jpg")', title: 'test1' },
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0067.jpg")', title: 'test2' },
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_mode_110217_0007.jpg")', title: 'test3' }
    ]

    $(images).each(function (index) {
        // create the LI programatically
        var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

        // append the new LI to UL
        $('ul#photo').append(listItem);

        // new image
        var img = new Image();

        // load image
        var $img = $(img)
                .wrap("<a/>")
                    .parent()
                    .attr("href", this.url)
                    .attr("title", this.title)
                    .end()
                .css('display', 'none')
                .addClass('thumbnail')
                .attr('src', this.url)
                .load(function () {
                    listItem.removeClass('loading').append(this);
                    $img.fadeIn();
                }).error(function () {
                    listItem.remove();
                });
    });
});

Testade igen och nu får jag fram bilderna men det går inte att klicka på dom :o

ah, nej det gör den ju inte ;) du appendar this på load:

$(function () {
    var images = [
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0120.jpg")', title: 'test1' },
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_110316_0067.jpg")', title: 'test2' },
        { url: '@Href("~/Content/Images/Photo/thumb_tryck_mode_110217_0007.jpg")', title: 'test3' }
    ]

    $(images).each(function (index, image) {
        // create the LI programatically
        var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

        // append the new LI to UL
        $('ul#photo').append(listItem);

        // new image
        var img = new Image();

        // load image
        var $img = $(img)
                .wrap("<a/>")
                .css('display', 'none')
                .addClass('thumbnail')
                .attr('src', image.url)
                .load(function () {
                    listItem.removeClass('loading').append(this);
                    $img
                        .fadeIn()
                        .wrap("<a/>")
                        .parent()
                            .attr("href", image.url)
                            .attr("title", image.title);

                }).error(function () {
                    listItem.remove();
                });
    });
});

demo: http://jsfiddle.net/6fg8r/

Underbart! :D
Min sista fråga (för stunden iaf) bara, går det att kapa bort första 6 bokstäverna i urlen i länken? Filen som det ska länkas till har samma namn förutom thumb_ i början, känns lättare än att ange två urler. :)

"123456789".substring(5) // "5789"

så substring borde nog lösa det problemet, annars så hade jag nog haft det som en property för att man skall fatta vad som händer.

Placerar jag på fel ställe för jag får inget resultat? :)

.attr("href", image.url.substring(6))

ser rätt ut, vad få du för url när du håller över med musen?

Har sett fel, det kapar men det blir ju på mappstrukturen och inte filnamnet! Men det kan jag fixa, behöver ju egentligen inte ange exakt samma sökväg för varje bild, räcker ju med filnamnet istället :)

eller så ha du en property med thumb och en för url så kan du återanvända koden ;)

Löste det så här:

        var images = [
        { name: 'tryck_110316_0120.jpg', title: 'Tryck' },
        { name: 'tryck_110316_0067.jpg', title: 'Tryck' },
        { name: 'tryck_mode_110217_0007.jpg', title: 'Tryck' },
        { name: 'editorial_01.jpg', title: 'Newz' },
        { name: 'editorial_02.jpg', title: 'Newz' },
        { name: 'editorial_03.jpg', title: 'Newz' }
        //{ name: '', title: '' },
    ]

        $(images).each(function (index, image) {
            // create the LI programatically
            var listItem = $('<li id="photo_' + index + '"></li>').attr('class', 'loading');

            // append the new LI to UL
            $('ul#photo').append(listItem);

            // new image
            var img = new Image();

            // load image
            var $img = $(img)
                .wrap("<a/>")
                .css('display', 'none')
                .addClass('thumbnail')
                .attr('src', '@Href("~/Content/Images/Photo/thumb_")' + image.name)
                .load(function () {
                    listItem.removeClass('loading').append(this);
                    $img
                        .fadeIn()
                        .wrap("<a/>")
                        .parent()
                            .attr("href", '@Href("~/Content/Images/Photo/")' + image.name)
                            .attr("class", 'fancybox')
                            .attr("data-fancybox-group", 'a')
                            .attr("title", image.title);

                }).error(function () {
                    listItem.remove();
                });
        });
    });

Kunde jag gjort det på något smidigare sätt? :)

Just det, hur kan jag göra koden återanvändbar? Har ju olika kategorier jag vill lista och att kopiera koden på nytt känns ju lagomt osmidigt :)

Bygg en metod för det:

var loadImages = function(images, selector) {/* ... */};

så kör du loadImages(images, 'ul#photo');