---
title: "Jquery vill inte dra igång"
type: "forum-thread"
url: "https://www.webforum.nu/amne/javascript/188933-jquery-vill-inte-dra-igång"
topic: "JavaScript"
topic_url: "https://www.webforum.nu/amne/javascript"
author: "Mika3l"
published: "2012-01-04T15:36:02.000Z"
updated: "2012-01-24T13:30:40.000Z"
replies: 22
views: 1528
page: 1
pages: 2
language: "sv-SE"
site: "webForum — webforum.nu"
rights: "Upphovsrätten till varje inlägg tillhör dess författare."
attribution: "Citera som: webForum, https://www.webforum.nu/amne/javascript/188933-jquery-vill-inte-dra-igång"
---

# Jquery vill inte dra igång

_Sida 1 av 2._

## #1 — Mika3l, 2012-01-04T15:36Z

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](http://www.chazzuka.com/jquery-image-loader-87/) 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>
```

Permalänk: https://www.webforum.nu/p/188933

## #2 — voigtann1, 2012-01-04T17:16Z

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.

Permalänk: https://www.webforum.nu/p/2290057

## #3 — Mika3l, 2012-01-04T18:09Z

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. :)

Permalänk: https://www.webforum.nu/p/2290059

## #4 — Mika3l, 2012-01-04T18:16Z

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.

Permalänk: https://www.webforum.nu/p/2290060

## #5 — voigtann1, 2012-01-04T20:13Z

> **[Mika3l skrev:](https://www.webforum.nu/p/1544705)**
>
> 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å.

Permalänk: https://www.webforum.nu/p/2290061

## #6 — Mika3l, 2012-01-11T10:50Z

```
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.

Permalänk: https://www.webforum.nu/p/2290256

## #7 — voigtann1, 2012-01-11T10:55Z

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.

Permalänk: https://www.webforum.nu/p/2290257

## #8 — Mika3l, 2012-01-11T11:09Z

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();
			});
        });
    });
```

Permalänk: https://www.webforum.nu/p/2290260

## #9 — voigtann1, 2012-01-11T11:12Z

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();
                });
    });
});
```

Permalänk: https://www.webforum.nu/p/2290261

## #10 — Mika3l, 2012-01-11T11:22Z

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

Permalänk: https://www.webforum.nu/p/2290264

## #11 — voigtann1, 2012-01-11T11:26Z

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/>

Permalänk: https://www.webforum.nu/p/2290266

## #12 — Mika3l, 2012-01-11T11:29Z

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. :)

Permalänk: https://www.webforum.nu/p/2290268

## #13 — voigtann1, 2012-01-11T11:33Z

```
"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.

Permalänk: https://www.webforum.nu/p/2290270

## #14 — Mika3l, 2012-01-11T11:41Z

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

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

Permalänk: https://www.webforum.nu/p/2290273

## #15 — voigtann1, 2012-01-11T11:44Z

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

Permalänk: https://www.webforum.nu/p/2290274

## #16 — Mika3l, 2012-01-11T11:54Z

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 :)

Permalänk: https://www.webforum.nu/p/2290275

## #17 — voigtann1, 2012-01-11T12:07Z

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

Permalänk: https://www.webforum.nu/p/2290276

## #18 — Mika3l, 2012-01-17T11:43Z

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? :)

Permalänk: https://www.webforum.nu/p/2290445

## #19 — Mika3l, 2012-01-17T11:45Z

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 :)

Permalänk: https://www.webforum.nu/p/2290446

## #20 — voigtann1, 2012-01-17T11:58Z

Bygg en metod för det:

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

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

Permalänk: https://www.webforum.nu/p/2290448

---

Tråden på webben: https://www.webforum.nu/amne/javascript/188933-jquery-vill-inte-dra-igång  
Nästa sida: https://www.webforum.nu/amne/javascript/188933-jquery-vill-inte-dra-igång/page2.md