Moin moin,
Liebe gemeinde. Dies ist meine erste Frage und ich hoffe ihr könnt mir helfen?!
Falss ich im falschen Topic bin bitte verschieben.
Bin in HTML, CSS und PHP ziemlich fit. Für mein aktuelles Projekt reicht das leider nicht mehr aus. Ich war auf der Suche nach einem Akkordeon und nach einem ImageSlider für eine Art Bildergallerie. Ich wurde im Thema jQuery auch fündig. Habe einige Beispiele und Tutorials durch und beides für sich genommen funktioniert nun auch.
Nun mein Problem:
Wenn ich den Slider in das Akkordeon einbaue, funktioniert der Slider nicht mehr. Kennt ihr dieses Problem?
Akkordeon:
Danke im Voraus
Tom
Liebe gemeinde. Dies ist meine erste Frage und ich hoffe ihr könnt mir helfen?!
Falss ich im falschen Topic bin bitte verschieben.
Bin in HTML, CSS und PHP ziemlich fit. Für mein aktuelles Projekt reicht das leider nicht mehr aus. Ich war auf der Suche nach einem Akkordeon und nach einem ImageSlider für eine Art Bildergallerie. Ich wurde im Thema jQuery auch fündig. Habe einige Beispiele und Tutorials durch und beides für sich genommen funktioniert nun auch.
Nun mein Problem:
Wenn ich den Slider in das Akkordeon einbaue, funktioniert der Slider nicht mehr. Kennt ihr dieses Problem?
Code:
<link href="neu.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"> </script>
<script type="text/javascript" src="java.js"></script>
<script type="text/javascript" src="stepcarousel.js"></script>
<script type="text/javascript">
//Slider
stepcarousel.setup({
galleryid: 'mygallery', //id of carousel DIV
beltclass: 'belt', //class of inner "belt" DIV containing all the panel DIVs
panelclass: 'panel', //class of panel DIVs each holding content
autostep: {enable:false, moveby:1, pause:3000},
panelbehavior: {speed:500, wraparound:false, wrapbehavior:'slide', persist:true},
defaultbuttons: {enable: true, moveby: 1, leftnav: ['button1.png', -40, 60], rightnav: ['button2.png', -3, 60]},
statusvars: ['statusA', 'statusB', 'statusC'], //register 3 variables that contain current panel (start), current panel (last), and total panels
contenttype: ['inline'] //content setting ['inline'] or ['ajax', 'path_to_external_file']
})
</script>
</head>
<body>
//Akkordeon
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
<img src="button/1.png">
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
<div class='test'></div>
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
<img src="button/2.png">
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.
</div>
</div>
//Slider der in das Akkordeon soll
<div id="mygallery" class="stepcarousel">
<div class="belt">
<div class="panel">
<img src="1.jpg" height="150px" />
</div>
<div class="panel">
<img src="2.jpg" height="150px" />
</div>
<div class="panel">
<img src="3.jpg" height="150px" />
</div>
<div class="panel">
<img src="4.jpg" height="150px" />
</div>
<div class="panel">
<img src="5.jpg" height="150px" />
</div>
<div class="panel">
<img src="6.jpg" height="150px" />
</div>
</div>
</div>Akkordeon:
Java:
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}Danke im Voraus
Tom
