Slideshow av bilder på nettside

[Reek]

Håper jeg er på riktig side av forumet nå..

Jeg lurer på hvordan jeg kan lage et slideshow med bilder på startsiden på en nettside jeg skal lage. Sånn som for eksempel på denne nettsiden http://www.pckompaniet.no/ Der har vi en fin slideshow som går konstant i en sirkel. Jeg har hovedsakelig tenkt til å kode hele nettsiden, men har tilgang på for Dreamweaver hvis jeg skulle få bruk for det.

I tillegg lurte jeg litt på hvor mye jeg må betale for en reklamefri nettside med det domene-navnet jeg selv vil ha og hvordan jeg finner fram til dette.
Som dere skjønner er nettsider noe jeg er helt ny på.

 

Takker for alle svar

[Gjest medlem-320537]

Når det gjelder slideshow så er det mange ressurser der ute. Du kan for eksempel sjekke ut denne på 1stwebdesigner. Har ikke sjekket alle de ulike typene, men satser på at det er tutorials for de fleste.

 

Det er helt valgfritt å ha reklame på websiden din. Hvis du ønsker å registrere ditt eget domene så kan du ty til domeneshop. Jeg bruker den og den fungerer helt fint. Du har også andre som godaddy.

 

Siden du ønsker å registrere ditt eget domene så er det ganske stor sannsynlighet for at du ønsker å la andre se websiden din. Du må da avgjøre om du vil ha websiden liggende på din egen eller noen andres server. Du kan for eksempel registrere deg hos WordPress.com og betale litt i året for å bruke ditt eget domene. Hvis du er up for the challenge så anbefaler jeg deg å sette opp din egen server og dermed hoste websiden selv. Ars Technica har en fantastisk guide som heter Web Served. Den lærer deg det grunnleggende med å sette opp din egen server, men også mer avanserte ting som å kryptere informasjon som sender til og fra websiden din og hvordan sette opp din egen Wordpres.org-blogg.

 

Håper dette dytter deg litt i riktig retning. Spør om det er noe du lurer på.

[Reek]

Takk for et veldig godt svar, er interessert i å prøve å sette opp en server selv ja, så skal prøve meg litt fram med dette.
Så jeg kan kjøpe et domene og så bruke det på min egen server?

[Wattengård]

Slike slideshow-løsninger kalles ofte for "carousel", så hvis du gugler det istedet for slideshow så kan det være du får flere treff..

 

Hosting og domene får du fra $1 og oppover

[Gjest medlem-320537]

Takk for et veldig godt svar, er interessert i å prøve å sette opp en server selv ja, så skal prøve meg litt fram med dette.

Så jeg kan kjøpe et domene og så bruke det på min egen server?

 

Så kult at du finner det interessant, det er en fantastisk mulighet for å lære noe nytt. Det er masse du kan gjøre.

 

Ja, du kan kjøpe ditt eget domene og bruke det på din egen server. Null stress. Du får vite alt om det i den guiden jeg nevnte tidligere (Ars Technica - Web Served).

[Reek]

Jeg vet ikke om noen har peiling på dette, men jeg har laget en enkel slider/carousel med JS, problemet er at jeg vil fade inn og ut alle 3 bildene jeg har i den, og det er bare 1. bildet som fader både ut og inn og nr 2 fader ut og nr 3 fader ikke i det hele tatt.

Dette er koden jeg har skrevet, vet ikke om html delen trengs for å løse dette, men tar med html delen for bildene:

 

<div id="slider">

<img id="1" src="images/colorwallpapaer.jpg">

<img id="2" src="images/planetwallpaper.jpg">

<img id="3" src="images/randomwallpaper.jpg">

 

</div>

Og her kommer JS:

 

sliderInt = 1;

sliderNext = 2;

$(document).ready(function(){

$("#slider > img#1").fadeIn(600);

startSlider();

});

function startSlider(){

count = $("#slider > img").size();

loop = setInterval(function() {

if(sliderNext > count){

sliderNext = 1;

sliderInt = 1;

}

$("#slider > img").fadeOut(600);

$("#slider > img#" + sliderNext).fadeIn(600);

sliderInt = sliderNext;

sliderNext = sliderNext + 1;

}, 3000);

}

function prev() {

newSlide = sliderInt -1;

showSlide(newSlide);

}

function next() {

newSlide = sliderInt +1;

showSlide(newSlide);

}

function stopLoop(){

window.clearInterval(loop);

}

function showSlide(id){

stopLoop();

if(id > count){

id=1;

}else if(id < 1){

id = count;

}

$("#slider > img").fadeOut(600);

$("#slider > img#" + id).fadeIn(600);

sliderInt = id;

sliderNext = id + 1;

startSlider();

}

$("#slider > img").hover(

function(){

stopLoop();

},

function(){

startSlider();

}

);

Endret 11. januar 2014 av Mariusrik

[Oyand]

"nivoSlider" er bra! Liker den svært godt. Responsiv og mange stilige overganger.