Kody do galeria obrazków

[groverr]

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

Edytowane 23 Listopada 2010 przez groverr

[DawPi]

W czym mamy pomóc? Może linki dasz ( do strony gdzie to testujesz i masz zainstalowane ), a nie kody? Przecież to trzeba wszystko poustawiać, pokleić i dopiero wtedy to robić.. A tak rzuciłeś kodami i czekasz..

Man!

{ + ]

Poza tym to żadna modyfikacja IP.Board. Przenoszę.

[DawPi]

Automatyczna wiadomość

Ten temat został przeniesiony z forum:

"Invision Power Board -> Invision Power Board 3.x -> Modyfikacje - pomoc"

do:

"Ogólne -> Web & Hosting & Grafika"

[groverr]

wysłałem na PW

[DawPi]

No to lepiej nie wysyłaj mi takich rzeczy na PW.

Forum jest dla ludzi, a nie dla mnie, więc próbują pomagać wszyscy.