1

サムネイルのみを表示するようにpikachooseを変更したい。私はすでにコードを少し変更しており、これが私が持っているものです:

http://i.stack.imgur.com/deQdG.png

これはbase.cssで変更したものです

/* Style the thumbnails */
.pika-thumbs {
    padding: 0 16px;
    height: 75px;
}

.pika-thumbs li {
    width: 144px;
    height: 74px;
    margin: 10px 0 0 17px;
    padding: 0;
    overflow: hidden;
    float: left;
    list-style-type: none;
    padding: 3px;
    margin: 0 5px;
    background: #fafafa;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}

.pika-thumbs li .clip {
    position: relative;
    height: 100%;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

/*for the tool tips*/
.pika-tooltip {
    font-size: 12px;
    position: absolute;
    color: white;
    padding: 3px;
    background-color: rgba(0,0,0,0.7);
    border: 3px solid black;
}

.pika-counter {
    position: absolute;
    bottom: 45px;
    left: 15px;
    color: white;
    background: rgba(0,0,0,0.7);
    font-size: 11px;
    padding: 3px;
    -moz-border-radius: 5px;
    border-radius: 5px;
}

/* If using user thumbnails there's a pause while the new large image loads. This is the loader for that */      
.pika-loader {
    background: url(loading.gif) 3px 3px no-repeat #000;
    background-color: rgba(0,0,0,0.9);
    color: white;
    width: 60px;
    font-size: 11px;
    padding: 5px 3px;
    text-align: right;
    position: absolute;
    top: 15px;
    right: 15px;
}

これを行うには、 jquery.pikachoose.jsで何を変更する必要がありますか?

私が取り組んでいるサイトはhttp://brassds.com/です

4

2 に答える 2

1

http://brassds.com/servicios.htmlを参照していると仮定すると、 Pikachooseのドキュメントには次のように記載されています。

PikaChoose がサムネイルを作成しますが、独自のサムネイルを使いたい場合は簡単です。画像の src をサムネイル画像に設定します。次に、以下の例のように、フルサイズの画像で ref 属性 (rel ではありません!) を追加します。PikaChoose はフル サイズの画像を自動的に取り込みます。

<img src="thumbnail.jpg" ref="fullsize.jpg" >

Servicios-pequena1.jpgさらに、 がサムネイルを指し、フルサイズの画像であると仮定Servicos-1.jpgすると、ソースを次のように変更できるはずです。

<ul id="pikame" class="jcarousel-skin-pika">
    <li><a href="#"><img src="images/trabajos/Servicios-pequena1.jpg" ref="images/trabajos/Servicos-1.jpg" alt=""/></a><span></span></li>
    <li><a href="#"><img src="images/trabajos/Servicios-pequena2.jpg" ref="images/trabajos/Servicos-2.jpg" alt=""/></a><span></span></li>
    <li><a href="#"><img src="images/trabajos/Servicios-pequena3.jpg" ref="images/trabajos/Servicos-3.jpg" alt=""/></a><span></span></li>
    ...
</ul>

Pikachooseがサムネイルを設定します。

于 2012-11-10T15:36:38.713 に答える
0

これは私のために働く：

.pika-stage {
    display: none;
}

これを PikaChoose ギャラリーのスタイルシートに追加し、 pikachoose() 関数が起動する前に読み込まれることを確認してください。

.pika-stage 要素は PikaChoose クラスによって自動作成されるため、おそらく削除できますが、これは非常に簡単です。

また、カルーセルで pikachoose() を呼び出して、ちょっとしたセンスを加えたいと思うかもしれません...

$("#id").PikaChoose({carousel:true});
于 2015-12-15T15:29:37.043 に答える