Slider behave erratical when not in full screen

[ingemarwiklund]

Setup

Browsers and versions: Chrome 64 bit, 63.0.3239.132
MediaWiki version: 1.28.3
Database version: 5.6.38
PHP version: 5.6.33 (cgi-fcgi)
Pivot version: 1.0.5
Extension version (if connected to the issue): -

Issue

The media slider doesn't work when the screen is small. If I use a lap top, the three small dots below the slider are visible and the arrows for left and right to navigate too. But if I shrink the window, making it narrow as a mobile screen, both the dots and the arrows disappear and the image slider is stuck on the last picture.

http://grundskoleboken.se/wiki/Sandl%C3%A5dan

It does work on my mobile though. Android Huawei honor 8. So I assume it's a minor bug.

And a wish... as it is now, the slider only works with pictures from my own repository or pictures from wikimedia commons. It would be nice if it was possible to add pictures based on any URI from Internet in the slider. (se link, I tried that but failed)

[Hutchy68]

And a wish... as it is now, the slider only works with pictures from my own repository or pictures from wikimedia commons. It would be nice if it was possible to add pictures based on any URI from Internet in the slider. (se link, I tried that but failed)

It will but you will need to look at https://www.mediawiki.org/wiki/Manual:$wgAllowExternalImages and really read the links at the bottom "See Also" as I would use one of those instead of a blanket allow.

I'll answer the other question when I get back.

[ingemarwiklund]

Indeed. I've used $wgAllowExternalImages since I installed pivot but didn't thik about enclosing the web adress for images in tags. I just changed the code and to my pleasure, realized that it is possible to add any images from internet in the slider.

Perhaps it should be mentioned on the page with the slider code that it is possible? Right now it's something you have to use trial and error to find.

[Hutchy68]

The media slider doesn't work when the screen is small. If I use a lap top, the three small dots below the slider are visible and the arrows for left and right to navigate too. But if I shrink the window, making it narrow as a mobile screen, both the dots and the arrows disappear and the image slider is stuck on the last picture.

When you shrink the window, you are activating mobile view. Mobile view doesn't show dots or arrows, space is at a premium so it hides those elements. You wouldn't need the arrows, in mobile view you swipe left or right to progress. If you reload the page while narrowed to activate mobile, the slideshow will start again.

If you want to view mobile, using the browser's built in emulation mode is better. Open developer tools and click on the highlighted yellow area.

Now you can test mobile views more accurately.

One more thing...

Using external images you might not be able to see the tooltip (pop up of the image name) even though it might be redundant. There is the caption below. Here are some thoughts on how to do it.

1. $wgAllowExternalImages = true; in LocalSettings.php no tooltip
2. $wgAllowImageTag = true; in LocalSettings.php with tooltip, but use title="Slide name not alt
3. Take 2 and create a Template:Image-external page to make adding <img> tag easier.

<ul class="example-orbit" data-orbit>
  <li class="active">
    https://pivot.wikiproject.net/w/images/1/19/Satelite-orbit.jpg
    <div class="orbit-caption">
      Caption One.
    </div>
  </li>
  <li>
    <img src="https://pivot.wikiproject.net/w/images/8/82/Andromeda-orbit.jpg" title="Slide 2" />
    <div class="orbit-caption">
      Caption Two.
    </div>
  </li>
  <li>
    {{external-image|https://pivot.wikiproject.net/w/images/5/56/Launch-orbit.jpg|Slide 3}}
    <div class="orbit-caption">
      Caption Three.
    </div>
  </li>
</ul>

Hope this helps!

T

[ingemarwiklund]

That is so good to know. I'm a teacher in elementary school, not a programmer and is more interestd in just having it work. Your explanations are thorough and easy to understand. Thank you for that.

This means that all extra icing on tthe cake in Pivot, compared to the vanilla wikimedia engine, is finally working just fine .

I've never used templates in my wikimedia installation, never understood the concept, but I'll dig deeper in "Template:Image-external".

I just wish you could add some hints about this, both about slider and tabs, in your own Pivot example page. I don't think ths is the first place people look for extra information.

I, myself, went from wikimedias page with mobile skins (https://www.mediawiki.org/wiki/Skin:Pivot) to the Pivot page (https://www.mediawiki.org/wiki/Skin:Pivot), to your Pivot page(https://pivot.wikiproject.net/wiki/Main_Page), to here. Making this the last place to look for extra information about Pivots different components.

Thanks for all help, you have been so kind and answered so quick. I hope I wont have to ask anything more now and wish you good luck with further development of Pivot.

[Hutchy68]

Thanks @ingemarwiklund

We should add this to Documentation and will.