Demo látható :D
Elkészítettem G-Portálra még egy képváltó kódot, amit akár fejlécen is használhattok :) Gondolom az egyértelmű mindenkinek, hogy ha fejlécen használjátok, akkor szükség van a fejléces menü kódjára is!!!
Akkkor jöjjön a kód és egy kis magyarázat hozzá:
Ezt a kódot kell bemásolnod az egyszerű modulod forráskód nézetébe, átírni 1-2 dolgot, amit ki is emelek nektek és kész is vagy :) Ahova nem írok semmit azt ne bántsd, ha nem értesz hozzá!
Akkor lesz szép a script, ha minden képed egyforma nagyságú!!!
<div class="bgcarousel" id="mybgcarousel"></div>
<script type="text/javascript" src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1330755922_09368.js"></script>
<style type="text/css">
div.bgcarousel{
background: black url(//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330756058_74.gif) center center no-repeat;
width:483px; /* képeid szélessége */
height:400px; /* képeid magassága */
}
img.navbutton{
margin:5px;
opacity:0.7;
}
div.slide{
background-color: black;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
color: black;
}
div.selectedslide{
}
div.slide div.desc{
position: absolute;
color: #000000; /* a szöveg színe, ami megjelenik a képeken */
left: 40px; /* a szöveg elhelyezkedése balról */
top: 20px; /* a szöveg elhelyezkedése fentről */
width:250px; /* a szöveg milyen hosszan foglaljon helyet a képen */
padding: 10px;
font: bold 16px Georgia; /* a szöveg stílusai */
text-shadow: 2px 2px 2px #ffffff; /* árnyék a szövegnek */
z-index:5;
}
div.selectedslide div.desc{
}
div.slide div.desc h2{
font-size:150%;
margin:0;
}
div.slide div.desc a{
color:yellow;
text-decoration:none;
}</style>
<script src="//aranymeli.gportal.hu/portal/aranymeli/upload/285733_1330755923_00312.js" type="text/javascript"></script><script type="text/javascript">
var firstbgcarousel=new bgCarousel({
wrapperid: 'mybgcarousel', //ID of blank DIV on page to house carousel
imagearray: [
['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330753701_07.png', 'Ha ide szöveget is szeretnél, megjelenik a képen :D'], //["image_path", "optional description"]
['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330753693_60.png', ''],
['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330753686_88.png', ''],
['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330753678_52.png', 'Bármelyik képre tehetsz szöveget :)'],
['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330753669_89.png', ''] //<--no trailing comma after very last image element!
],
displaymode: {type:'auto', pause:3000, cycles:2, stoponclick:false, pauseonmouseover:true},
navbuttons: ['//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330756043_25.gif', '//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330756036_84.gif', '//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330756028_83.gif', '//aranymeli.gportal.hu/portal/aranymeli/image/gallery/1330756051_61.gif'], // path to nav images
activeslideclass: 'selectedslide', // CSS class that gets added to currently shown DIV slide
orientation: 'h', //Valid values: "h" or "v"
persist: true, //remember last viewed slide and recall within same session?
slideduration: 500 //transition duration (milliseconds)
})
</script>
Itt a javascript kódban azt emeltem ki, hogy hol kell kicserélned a képedre az enyémet. Az az, hova illeszd be a saját képed url címét.
|