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