Witam znalazłem kod do stworzenia galerii obrazków
to dodaje do globalTemplate w head
:
Kod:
<script src="../js_jq/jquery-1.2.6.pack.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
// Remove scrollbar in JS
$('#slidesContainer').css('overflow', 'hidden');
// Wrap all .slides with #slideInner div
slides
.wrapAll('<div id="slideInner"></div>')
// Float left to display horizontally, readjust .slides width
.css({
'float' : 'left',
'width' : slideWidth
});
// Set #slideInner width equal to total width of all slides
$('#slideInner').css('width', slideWidth * numberOfSlides);
// Insert controls in the DOM
$('#slideshow')
.prepend('<span class="control" id="leftControl">Clicking moves left</span>')
.append('<span class="control" id="rightControl">Clicking moves right</span>');
// Hide left arrow control on first load
manageControls(currentPosition);
// Create event listeners for .controls clicks
$('.control')
.bind('click', function(){
// Determine new position
currentPosition = ($(this).attr('id')=='rightControl') ? currentPosition+1 : currentPosition-1;
// Hide / show controls
manageControls(currentPosition);
// Move slideInner using margin-left
$('#slideInner').animate({
'marginLeft' : slideWidth*(-currentPosition)
});
});
// manageControls: Hides and Shows controls depending on currentPosition
function manageControls(position){
// Hide left arrow if position is first slide
if(position==0){ $('#leftControl').hide() } else{ $('#leftControl').show() }
// Hide right arrow if position is last slide
if(position==numberOfSlides-1){ $('#rightControl').hide() } else{ $('#rightControl').show() }
}
});
</script>
To dodaje do boardindexTemplate
Kod:
<div id="srodek">
<div id="slideshow">
<div id="slidesContainer">
<div class="slide">
<div id="slide_b"><img src="../images/obrazek1.png" width="190" height="241" />Herb wykonany dla klanu dgd</p></div>
</div>
<div class="slide">
<p><img src="../images/layout2010a.png" width="190" height="241" />Layout wykonany dla zabicia czasu.<br /><br />NA SPRZEDAŻ<br /><br /> Kodowanie: w trakcie <br /><br /><a href="../images/layout2010.png" />Zobacz całość</a>
</div>
<div class="slide">
<p><img src="../images/layoutportfolio.png" width="190" height="241" />Layout mojego pierwszego portfolio.<br /><br /> <a href="../images/layoutportfolioa.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/layoutradio.png" width="190" height="241" />Layout wykonany na zlecenie.<br /><br /> NA SPRZEDAŻ<br /><br /> Kodowanie: Tak<br /><br /> <a href="../images/layoutradioa.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/radiolayout.png" width="190" height="241" />Jeden z pierwszych mlayoutów mojego wykonania.<br /><br /> NA SPRZEDAŻ<br /><br /> Kodwanie: Tak<br /><br /> <a href="../images/radiolayouta.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/csligi lay.png" width="190" height="241" />Layout wykonany na zlecenie dla Electronic Pro Cup<br /><br /> <a href="../images/csligi lay-a.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/PF Lay-a.png" width="190" height="241" />Layout Portfolio<br /><br /> NA SPRZEDAŻ<br /><br /> Kodwanie: Tak<br /><br /> <a href="../images/PF Lay.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/lay [23.png" width="190" height="241" />Layout Portfolio<br /><br /> NA SPRZEDAŻ<br /><br /> Kodwanie: Tak<br /><br /> <a href="../images/lay [23.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/lay [24.png" width="190" height="241" />Layout Portfolio<br /><br /> NA SPRZEDAŻ<br /><br /> Kodwanie: Brak<br /><br /> <a href="../images/lay [24.png" />Zobacz całość</a></p>
</div>
<div class="slide">
<p><img src="../images/lay [25.png" width="190" height="241" />Layout Portfolio<br /><br /> NA SPRZEDAŻ<br /><br /> Kodwanie: Brak<br /><br /> <a href="../images/lay [25.png" />Zobacz całość</a></p>
</div>
</div>
</div>
</div>
To dodaje w ipb_styles
:
Kod:
/*SlideShow*/
#obrazki_h {width:328px; height:31px; margin:5px; background-image:url(img/nowoscbg.png); float:left;}
#losowyobrazek {width:338px; height:310px; border:5px solid #626262; border-radius:4px; margin:0 48px 0 5px; float:left;}
#prevNext img {cursor: pointer;}
#zmieniarka {width: 250px; height: 280px; margin: 10px 44px 0 44px; text-align:center;}
.hidden {display: none;}
#slides {width: 250px; height: 280px; margin: 10px 44px 0 44px; text-align:center;}
#slides p {margin: 0; padding:0 1em; font-size:13px; position:relative; top:-30px; line-height:30px; height:30px; background: black; opacity: .7; filter:alpha(opacity=70); color:white; font-weight:bold; text-align:center;}
#slideshow {margin:30px auto; width:640px; height:263px; position:relative;}
#slideshow #slidesContainer {margin:0 auto; width:560px; height:263px; overflow:auto; /* allow scrollbar */ position:relative;}
#slideshow #slidesContainer .slide {margin:0 auto; width:540px; /* reduce by 20 pixels of #slidesContainer to avoid horizontal scroll */height:263px; margin-top:4px; color:white; text-align:center; font-size:18px; font-family:Arial;}
#leftControl {top:110px; left:0; background:transparent url(img/control_left.jpg) no-repeat 0 0;}
#rightControl {top:110px; right:0; background:transparent url(img/control_right.jpg) no-repeat 0 0;}
.control {display:block; width:39px; height:263px; text-indent:-10000px; position:absolute; cursor: pointer;}
.slide img {float:right; margin:0 15px;}
.slide p {margin:15px;}
powinno to wyglądać tak
Ale jak dodaje te kody wychodzi galeria ale z paskiem do przewijania z góry na dół..
Czy może ktoś mi pomóc
//edit..znalazłem to na przemo.org
