HighslideJSキャプション（デスクトップ上のleftpanel）及び（モバイル上の下）

私はこのウェブサイトがあります。highslideについてはhttp://urbanphenomena.net/HighslideJSキャプション（デスクトップ上のleftpanel）及び（モバイル上の下）

を、私は画像の左側にデスクトップに良さそうに見えますキャプションを作成して、それが表示されます私は、このコードすることを決めた格好良いされていない携帯電話でも同じ：

<script type="text/javascript"> 
     hs.align = 'center'; 
     hs.transitions = ['expand', 'crossfade']; 
     hs.outlineType = 'rounded-black'; 
     hs.wrapperClassName = 'dark'; 
     hs.fadeInOut = true; 
     hs.dimmingOpacity = 0.75; 
     // Add the controlbar 
     if (hs.addSlideshow) hs.addSlideshow({ 
     //slideshowGroup: 'group1', 
     interval: 5000, 
     repeat: false, 
     useControls: true, 
     fixedControls: 'fit', 
     overlayOptions: { 
      opacity: .75, 
      position: 'bottom center', 
      hideOnMouseOut: true 
     } 
     }); 
    </script> 
    <script type="text/javascript"> 
     hs.graphicsDir = 'js/highslide/graphics/'; 
     hs.captionOverlay.position = "leftpanel"; 
     hs.captionOverlay.width = "350px"; 

     if ($(window).width() <= 1000) { 
     hs.captionOverlay.width = "150px"; 
      hs.align = 'left'; 
     } 
    </script>

hs.captionOverlay.position =「leftpanelは、」キャプションのポジショニングを担当するコードですが、私は、if文の上にそれを置く場合モバイルの場合は次のようになります。 http://imgur.com/a/TfGBa

問題は何と思いますか？

出典

2017-04-11 Abdulrahman Mushref

私は少し混乱しています。あなたのスレッドのタイトルは、あなたが携帯電話の下部にあるキャプションが欲しいと言っていますが、あなたのコードは常にキャプションを左パネルに配置します。それは単にそれをモバイルで狭くしようとします。 – MisterNeutron

他の方向から来る方が簡単だと思います。画像（デフォルト）以下のキャプションショーをしてみましょうが、ウィンドウが1000px以上広い場合、leftpanelに移動：

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Highslide JS</title> <link rel="stylesheet" href="../highslide/highslide.css"> <script src="../highslide/highslide-full.js"></script> <script src="jquery.min.js"></script> <script> hs.graphicsDir = '../highslide/graphics/'; hs.align = 'center'; hs.transitions = ['expand', 'crossfade']; hs.outlineType = 'rounded-white'; hs.fadeInOut = true; hs.addSlideshow({ interval: 5000, repeat: false, useControls: true, fixedControls: 'fit', overlayOptions: { opacity: .75, position: 'bottom center', hideOnMouseOut: true } }); if($(window).width() > 1000) { hs.captionOverlay.position = 'leftpanel'; hs.captionOverlay.width = '200px'; } </script> </head> <body> <div class="highslide-gallery"> <a href="../images/gallery1.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="../images/gallery1.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a> <div class="highslide-caption">Caption for the first image. This caption can be styled using CSS.</div> <a href="../images/gallery2.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="../images/gallery2.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a> <div class="highslide-caption">Caption for the second image.</div> <a href="../images/gallery3.jpg" class="highslide" onclick="return hs.expand(this)"> <img src="../images/gallery3.thumb.jpg" alt="Highslide JS" title="Click to enlarge"></a> <div class="highslide-caption">Caption for the third image.</div> </div> </body> </html>

出典

2017-04-11 12:08:50 MisterNeutron

あなたは素晴らしいです！ –

ありがとう！私はそれにすばやく少しのテストを与え、それは動作するようです。キャッチはもちろん、ウィンドウのサイズを変更して遊んでいる場合は、毎回リフレッシュする必要があります。これはどれも動的に応答しないためです。私はHighslide JSがウィンドウサイズの変更を「生きている」ようにするための悩みを見ましたが、結果は本当にひどいものでした！ – MisterNeutron

HighslideJSキャプション（デスクトップ上のleftpanel）及び（モバイル上の下）

答えて

関連する問題