HighslideJS Bildunterschrift (leftpanel auf Desktop) und (unten auf mobile)

Ich habe diese Seite: http://urbanphenomena.net/HighslideJS Bildunterschrift (leftpanel auf Desktop) und (unten auf mobile)

Für die Highslide, habe ich eine Beschriftung erstellt, die auf dem Desktop auf der linken Seite der Bilder schön aussieht, ist es angezeigt das gleiche in mobilen, die nicht auf der Suche ist gut so habe ich beschlossen, diese zu kodieren:

<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‘ ist der Code für die Position der Beschriftung, aber wenn ich auf der if-Anweisung, dass setzen Es sieht so aus: http://imgur.com/a/TfGBa

Was ist Ihrer Meinung nach das Problem?

Quelle

2017-04-11 Abdulrahman Mushref

Ich bin ein wenig verwirrt. Dein Threadtitel besagt, dass du die Beschriftung unten auf einem Handy haben möchtest, aber dein Code setzt die Beschriftung immer auf der linken Seite. Es versucht nur, es auf einem Handy enger zu machen. – MisterNeutron

Ich denke, Sie werden es leichter finden, aus der anderen Richtung zu kommen. Lassen Sie die Beschriftung Show unter dem Bild (Standardeinstellung), aber wenn das Fenster breiter als 1000px ist, verschieben Sie es an die 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>

Quelle

2017-04-11 12:08:50 MisterNeutron

Sie, sind super! –

Danke! Ich habe es kurz getestet und es scheint zu funktionieren. Der Catch ist natürlich, dass wenn Sie mit der Größenänderung des Fensters herumspielen, Sie jedes Mal eine Aktualisierung durchführen müssen, da nichts davon dynamisch reagiert. Ich habe einen Kludn gesehen, der Highslide JS dazu gebracht hat, auf Änderungen der Fenstergröße "live" zu reagieren, aber die Ergebnisse waren wirklich schrecklich! – MisterNeutron

HighslideJS Bildunterschrift (leftpanel auf Desktop) und (unten auf mobile)

Antwort

Verwandte Themen