Question

我正在尝试将this gallery添加到my blogger blog，我不知道如何更改宽度。我正在使用以下代码。我博客的宽度是980px。我试图将550更改为更小的尺寸，但图像低于！

    <style type="text/css">
div.ccontent {
 /* The display of ccontent is enabled using jQuery so that the slideshow ccontent won't display unless javascript is enabled. */
 display: none;
 float: right;
 width: 550px; 
}
div.ccontent a, div.navigation a {
 text-decoration: none;
 color: #777;
}
div.ccontent a:focus, div.ccontent a:hover, div.ccontent a:active {
 text-decoration: underline;
}
div.controls {
 margin-top: 5px;
 height: 23px;
}
div.controls a {
 padding: 5px;
}
div.ss-controls {
 float: left;
}
div.nav-controls {
 float: right;
}
div.slideshow-container {
 position: relative;
 clear: both;
 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.loader {
 position: absolute;
 top: 0;
 left: 0;
 background-image: url('http://img707.imageshack.us/img707/6035/loader.gif');
 background-repeat: no-repeat;
 background-position: center;
 width: 550px;
 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
}
div.slideshow {

}
div.slideshow span.image-wrapper {
 display: block;
 position: absolute;
 top: 0;
 left: 0;
}
div.slideshow a.advance-link {
 display: block;
 width: 550px;
 height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 line-height: 502px; /* This should be set to be at least the height of the largest image in the slideshow */
 text-align: center;
}
div.slideshow a.advance-link:hover, div.slideshow a.advance-link:active, div.slideshow a.advance-link:visited {
 text-decoration: none;
}
div.slideshow img {
 vertical-align: middle;
 border: 1px solid #ccc;
}
div.download {
 float: right;
}
div.caption-container {

}
span.image-caption {
 display: block;
 position: absolute;
}
div.caption {
 background-color: #000;
 padding: 12px;
 color: #ccc;
}
div.caption a {
 color: #fff;
}
div.image-title {
 font-weight: bold;
 font-size: 1.4em;
}

div.image-desc {
 line-height: 1.3em;
 padding-top: 12px;
}
div.navigation {
 /* The navigation style is set using jQuery so that the javascript specific styles won't be applied unless javascript is enabled. */
}
ul.thumbs {
 clear: both;
 margin: 0;
 padding: 0;
}
ul.thumbs li {
 float: none;
 padding: 0;
 margin: 0;
 list-style: none;
}
a.thumb {
 padding: 0;
 display: inline;
 border: none;
}
ul.thumbs li.selected a.thumb {
 color: #000;
 font-weight: bold;
}
a.thumb:focus {
 outline: none;
}
ul.thumbs img {
 border: none;
 display: block;
}
div.pagination {
 clear: both;
}
div.navigation div.top {
 margin-bottom: 12px;
 height: 11px;
}
div.navigation div.bottom {
 margin-top: 12px;
}
div.pagination a, div.pagination span.current, div.pagination span.ellipsis {
 display: block;
 float: left;
 margin-right: 2px;
 padding: 4px 7px 2px 7px;
 border: 1px solid #ccc;
}
div.pagination a:hover {
 background-color: #eee;
 text-decoration: none;
}
div.pagination span.current {
 font-weight: bold;
 background-color: #000;
 border-color: #000;
 color: #fff;
}
div.pagination span.ellipsis {
 border: none;
 padding: 5px 0 3px 2px;
}
#captionToggle a {
 float: right;
 display: block;
 background-image: url('http://img94.imageshack.us/img94/2515/captionj.png');
 background-repeat: no-repeat;
 background-position: right;
 margin-top: 5px;
 padding: 5px 30px 5px 5px;
}
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://galleriffic.googlecode.com/svn/trunk/example/js/jquery.galleriffic.js"></script>

<div id="page">
   <div id="container">
    <h1><a href="index.html">Galleriffic</a></h1>
    <h2>Minimal implementation</h2>

    <!-- Start Minimal Gallery Html Containers -->
    <div id="gallery" class="ccontent">
     <div id="controls" class="controls"></div>
     <div class="slideshow-container">
      <div id="loading" class="loader"></div>
      <div id="slideshow" class="slideshow"></div>
     </div>
    </div>
    <div id="thumbs" class="navigation">
     <ul class="thumbs noscript">
      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">Title #0</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2404/2538171134_2f77bc00d9.jpg" title="Title #1">Title #1</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2093/2538168854_f75e408156.jpg" title="Title #2">Title #2</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3153/2538167690_c812461b7b.jpg" title="Title #3">Title #3</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3150/2538167224_0a6075dd18.jpg" title="Title #4">Title #4</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3204/2537348699_bfd38bd9fd.jpg" title="Title #5">Title #5</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3124/2538164582_b9d18f9d1b.jpg" title="Title #6">Title #6</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3205/2538164270_4369bbdd23.jpg" title="Title #7">Title #7</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3211/2538163540_c2026243d2.jpg" title="Title #8">Title #8</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2315/2537343449_f933be8036.jpg" title="Title #9">Title #9</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2167/2082738157_436d1eb280.jpg" title="Title #10">Title #10</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2342/2083508720_fa906f685e.jpg" title="Title #11">Title #11</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2132/2082721339_4b06f6abba.jpg" title="Title #12">Title #12</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2139/2083503622_5b17f16a60.jpg" title="Title #13">Title #13</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2041/2083498578_114e117aab.jpg" title="Title #14">Title #14</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2149/2082705341_afcdda0663.jpg" title="Title #15">Title #15</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2014/2083478274_26775114dc.jpg" title="Title #16">Title #16</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2194/2083464534_122e849241.jpg" title="Title #17">Title #17</a>
      </li>

      <li>
       <a class="thumb" href="http://farm4.static.flickr.com/3127/2538173236_b704e7622e.jpg" title="Title #18">Title #18</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2375/2538172432_3343a47341.jpg" title="Title #19">Title #19</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2353/2083476642_d00372b96f.jpg" title="Title #20">Title #20</a>
      </li>

      <li>
       <a class="thumb" href="http://farm3.static.flickr.com/2201/1502907190_7b4a2a0e34.jpg" title="Title #21">Title #21</a>
      </li>

      <li>
       <a class="thumb" href="http://farm2.static.flickr.com/1116/1380178473_fc640e097a.jpg" title="Title #22">Title #22</a>
      </li>

      <li>
       <a class="thumb" href="http://farm2.static.flickr.com/1260/930424599_e75865c0d6.jpg" title="Title #23">Title #23</a>
      </li>
     </ul>
    </div>
    <!-- End Minimal Gallery Html Containers -->
    <div style="clear: both;"></div>
   </div>
  </div>
  <div id="footer">&copy; 2009 Trent Foley</div>
  <script type="text/javascript">
   // We only want these styles applied when javascript is enabled
   $('div.navigation').css({'width' : '300px', 'float' : 'left'});
   $('div.ccontent').css('display', 'block');

   $(document).ready(function() {    
    // Initialize Minimal Galleriffic Gallery
    $('#thumbs').galleriffic({
     imageContainerSel:      '#slideshow',
     controlsContainerSel:   '#controls'
    });
   });
  </script>

Answer 1

document.getElementById("thumbs").style.width = "123px";

Answer 2

您甚至不需要任何脚本。 div.slideshow-container{margin-left:-25px}工作正常。

如何改变此图库的宽度？

2 个答案: