Random image i header

jensniko · Post by **jensniko** » Sat Nov 06, 2010 9:20 pm

Hej folkens

jeg er helt ny inden for cmsms.

Jeg har denne side: akvariestedet.dk

Jeg kunne godt tænke mig ag Header billedet skifter enten ved sideskift eller automatisk efter xx sekunder.

Nogen der kan hjælpe

???

Hilsen jensniko

webform · Post by **webform** » Sun Nov 07, 2010 2:11 am

Prøv denne random stylesheet metode (benytter den også selv):

Beskrivelse:

Opret x antal stylesheets svarende til det antal header images du har. f.eks noget lignende:

Code: Select all

#header {
	background-image: url(uploads/images/header1.jpg);
}

Navngiv hver stylesheet fortløbende f.eks. header1, header2 osv.

I din sideskabelon indsætter du følgende kode i html header området:

Code: Select all

{capture assign='cssname'}header{1|rand:x}{/capture}
{stylesheet name="$cssname" media="screen"}

{1|rand:x} x = det antal stylesheets med header images du har. Har du f.eks. 5 indsætter du tallet 5!

Nu vil et random header stylesheet blive kaldt hver gang en ny side indlæses eller reloades.

jensniko · Post by **jensniko** » Sun Nov 07, 2010 7:34 am

hej

Jeg har prøvet af følge din guide, men kan ikke få det til at funke.

Den overste kode har jeg styr på (tror jeg)

Kan du ikke uddybe hvor jeg indsætter den nederste kode?

Hilsen Jens

maxxx · Post by **maxxx** » Sun Nov 07, 2010 8:29 am

You can use "image slider" or modul Showtime!

webform · Post by **webform** » Mon Nov 08, 2010 4:09 pm

jensniko wrote: Kan du ikke uddybe hvor jeg indsætter den nederste kode?

Det indsætter du mellem . Dog efter {styleheet} taggen:

Code: Select all

{stylesheet}
{capture assign='cssname'}Header{1|rand:8}{/capture}
{stylesheet name="$cssname" media="screen"}

jensniko · Post by **jensniko** » Mon Nov 08, 2010 4:48 pm

Hej

Nu har jeg prøvet at indsætte koden.

Code: Select all

{process_pagedata}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<__html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" >
<head>
<title>{sitename} - {title}</title>
<!--[if IE 6]><link rel="stylesheet" href="/uploads/G2/style.ie6.css" type="text/css" media="screen" /><![endif]-->
<!--[if IE 7]><link rel="stylesheet" href="/uploads/G2/style.ie7.css" type="text/css" media="screen" /><![endif]-->
    <__script__ type="text/javascript" src="/uploads/G2/script.js"></__script>
{metadata}
{stylesheet}
{capture assign='cssname'}header{1|rand:9}{/capture}
{stylesheet name="$cssname" media="screen"}
</head>
</__body>
<div id="art-main">
        <div class="art-sheet">
            <div class="art-sheet-tl"></div>
            <div class="art-sheet-tr"></div>
            <div class="art-sheet-bl"></div>
            <div class="art-sheet-br"></div>
            <div class="art-sheet-tc"></div>
            <div class="art-sheet-bc"></div>
            <div class="art-sheet-cl"></div>
            <div class="art-sheet-cr"></div>

Den skifter dog ikke ved side skift, hvad gør jeg galt?

Hilsen Jens

webform · Post by **webform** » Mon Nov 08, 2010 5:06 pm

Har du navngivet dine stylesheets header1, header2 osv?

{capture assign='cssname'}header{1|rand:9}{/capture}
(Læg mærke til at outputtet af denne vil være "header1 til header9")

Navnene på dine stylesheets skal passe sammen med hvad du capture!

Og den div id du har indsat i dine stylesheets også findes i din side skabelon?

jensniko · Post by **jensniko** » Mon Nov 08, 2010 5:06 pm

og såda ser css ud

Code: Select all

/* begin Header */
div.art-header
{
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 992px;
  height: 150px;
  overflow: hidden;
}


div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 992px;
  height: 150px;
  background-image: url(/uploads/G2/header.jpg);
  background-image: url(/uploads/G2/header1.jpg);
  background-image: url(/uploads/G2/header2.jpg);
  background-image: url(/uploads/G2/header3.jpg);
  background-image: url(/uploads/G2/header4.jpg);
  background-image: url(/uploads/G2/header5.jpg);
  background-image: url(/uploads/G2/header6.jpg);
  background-image: url(/uploads/G2/header7.jpg);
  background-image: url(/uploads/G2/header8.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

/* end Header */

webform · Post by **webform** » Mon Nov 08, 2010 5:19 pm

Ahh! Jamen se det er også forkert

I din default stylesheet indsæt denne:

Code: Select all

div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 992px;
  height: 150px;
  background-image: url(/uploads/G2/header.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}

I hver af dine "header" stylesheets indsæt denne:

Code: Select all

div.art-header-jpeg
{
  background-image: url(/uploads/G2/header1.jpg);
}

OBS! I nummer 2 header stylesheet er det så header2.jpg og i header stylesheet 3 er det header3.jpg osv.

Hvis du indsætter alle background-image i samme stylesheet som du har gjort, er det kun den sidste background-image der bliver indlæst.
Det er også grunden til at jeg oplyser at du skal indsætte random kaldet efter {stylesheet} så det "overskriver" din default "background-image" du har stående i dit default stylesheet.

Grunden til at jeg skriver at du skal indsætte "background-image: url(/uploads/G2/header.jpg);" i dit default stylesheet, er at hvis det utænkelige sker og random funktionen fejler, vil der altid være et header billede til rådighed!

jensniko · Post by **jensniko** » Mon Nov 08, 2010 5:42 pm

Hmm, det er vist nu man godt kan kalde mig XXXXXXXXXXX

Code: Select all

/* begin Header */
div.art-header
{
  margin: 0 auto;
  position: relative;
  z-index: 0;
  width: 992px;
  height: 150px;
  overflow: hidden;
}


div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 992px;
  height: 150px;
  background-image: url(/uploads/G2/header1.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 992px;
  height: 150px;
  background-image: url(/uploads/G2/header2.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
div.art-header-jpeg
{
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 992px;
  height: 150px;
  background-image: url(/uploads/G2/header3.jpg);
  background-repeat: no-repeat;
  background-position: center center;
}
/* end Header */

Og det virker SXX stadig ikke......

Coldman · Post by **Coldman** » Mon Nov 08, 2010 6:23 pm

Hoppas du förstår svenska

Försök med detta.

Code: Select all

{capture assign='num'}{1|rand:10}{/capture}

Och i din mall lägger du detta i

Code: Select all

<img src="/uploads/G2/{$num}.jpg" width='992' height='150'/>

EDIT:
Denna del {1|rand:10} skiftar mellan 1 till 10 bilder. har du färre bilder än 10 skriv då det rätta.

/Coldman

webform · Post by **webform** » Mon Nov 08, 2010 7:07 pm

Det ser ud til at du placerer det i samme stylesheet. Det skal være i separate stylesheets navngivet som tidligere oplyst.

Opret et nyt stylesheet og indsæt

Code: Select all

div.art-header-jpeg
{
  background-image: url(/uploads/G2/header1.jpg);
}

Navngiv stylesheetet header1 og gem.

Opret et nyt stylesheet og indsæt

Code: Select all

div.art-header-jpeg
{
  background-image: url(/uploads/G2/header2.jpg);
}

Navngiv stylesheetet header2 og gem.

Fortsæt som ovenstående for hver header image.

Herefter vil hver reload eller sideskift random vælge mellem de navngivne stylesheets header1 til header9.

jensniko · Post by **jensniko** » Mon Nov 08, 2010 7:44 pm

Hay Hay, Nåååå sådan.

NU virker det. Det kunne i BARE have sagt.

(GRINER)

Takker & Bukker MANGE MANGE gange......

Hilsen Jens

jensniko · Post by **jensniko** » Mon Nov 08, 2010 7:46 pm

kan det passe at siden er blevet lidt langsommere ved reload eller sideskift???

webform · Post by **webform** » Mon Nov 08, 2010 7:52 pm

Du har tilknyttet de forskellige Header stylesheets til din side skabelon - Det skal du ikke! Det er hvad Random koden tager sig af!

CMS Made Simple Forums

Random image i header

Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header

Re: Random image i header