FANDOM


  • Is it possible to add description to images directly below them as shown in the image below?


    The description should appear smoothly (like here when you click "show" or "hide, it does not appear instantly), and also should move the text below it down. Also, please ignore the "fading in and out for 0.2 seconds each" part. Even if you don't understand what I'm saying, please reply!

      Loading editor
    • Use a table like:

      Viewed all the time (hide/show)
      Hidden content

      Which is just:

      {|class="mw-collapsible mw-collapsed"
      !Viewed all the time (hide/show)
      |-
      |Hidden content
      |}
      

      Then just style it with CSS (for some reason mw-collapsible isn't working here).

        Loading editor
    • Well, I know nothing about CSS, can you help me achieve the style above please? Also, as I said above, I want it to come down smoothly, moving the text below rapidly down but not instantly. In addition, I've also changed my mind - I would like the description to appear when clicked on the image.

        Loading editor
    • I'm not going to build and maintain a script which is going to change as you decide what you want. There comes point when you have to learn about things yourself, ignoring the fact I've never attempted anything like a collapsing script. I don't mind helping out with quick fixes, but this is something else entirely.

      However, it is relatively straightforward to adapt the existing template to do what you wanted. In terms of HTML, you'd need to wrap the <img /> tag in <a> tags, to stop the image linking to the file page. You'd probably need to remove the link to the file page in the process. The description can largely stay as it is. If you want an idea of how to go about it, take a look at Splarka's tricks, I believe there's a collapsible portlet script for monobook in there somewhere which still works. It's unmaintained (as is pretty much everything Splarka wrote from back then) so don't quote me on it working. But you'd be surprised how much of it stands up today, such as the mark all redirects in Special:AllPages. Wikipedia also has a collapsible table script, see wikipedia:MediaWiki:Common.js, which should be maintained.

      But by far the best advice I can give is to use google. Not sure how to go about something? Having trouble getting the last little bit to work? Google a short description of your problem and chances are it'll come up with a fix, or something close. Stackoverflow is usually quite high in the results, and has a huge community of javascript gurus. But again, they're unlikely to write the entire script for you. It's where I go when I'm having trouble (I feel bad spamming certain users talk pages when I can get there myself if I look hard enough).

        Loading editor
    • I'm trying to do the same thing but there's seem to be an lot of issuses with it like supporting it for the mobile skinn or figure out an good overview when the script doens't work.

      In fact it could work if you combine "cursor:help; (object.style.cursor="crosshair")" with the image. I not sure that would work. Someone claims that it's possible with css.

        Loading editor
    • The mobile skin doesn't load any javascript or CSS without certain ugly hacks, even then something like this isn't going to be a good idea for mobile browsers.

        Loading editor
    • Yes but when the script and css is not working the description need to remain on the page. In fact this is the html that is needed:

      <span style="cursor:help;"><img src="image.gif" alt="description" title="description" /></span>

      Alt is for support IE.

      The tricky part is that both alt and title need to be loaded when using html so js will be required:

      <div id="description-image">{{{Description}}}</div>
        Loading editor
    • Well, I've already asked Lunarity for help. Hopefully he will come up with a suitable code.

        Loading editor
    • Why not pure CSS?
      .hint { display: none; background-color: black; margin: 5px auto; width: 200px; }
      .field:hover .hint { display: block; }

      <div class="field">[[File:TESV- SKYRIM.jpg]]
      

      <div class="hint">Hello World!</div></div>

      Some other text.
      You can even add a fade-in.
        Loading editor
    • Smart thinking, but this will not work when the content need to be displayed else where on the page. For example inside an table.

      But I gues it's possible to code overlay with css if relative on image location works.

        Loading editor
    • Did an try for the overlay css. It currently have some small bugs like large texts popup out the frame:

      .hint { 
      display: none; 
      background-color: rgb(242, 242, 242); 
      margin: 5px auto; 
      position:relative; 
      width:250px;
      height:auto; }
       
      .field:hover .hint { 
      display: block; 
      position:absolute;
      z-index:999; 
      width:250px;
      height:auto; }
        Loading editor
    • I tested your CSS, I have no such issues on FF 19.0.2.

        Loading editor
    • It works, but when using it an table it can give an bug when there is an large text inside it. There's something to prevent that from happening. But I don't remember.

        Loading editor
    • Update:

      .hint { 
      display: none; 
      background-color: rgb(242, 242, 242); 
      border: 1px blue;
      margin: 5px auto; 
      position:relative; 
      -webkit-box-shadow: 10px 10px 10px -1px #999;
      box-shadow: 10px 10px 10px -1px #999;
      -moz-box-shadow: 10px 10px 10px -1px #999; 
      padding:10px; 
      border-radius:4px; }
       
      .field:hover .hint { 
      display: block; 
      position:absolute;
      z-index:999; }
        Loading editor
    • Thanks! I will test out the code.

        Loading editor
    • Np, just note that just like any div tag this will not work for the mobile skin. So I suggest you keep and eye on the amount of content when you are using it inside infoboxes. I test it with the description and it doens't give that nice result.

        Loading editor
    • How about making "hint" only appear when the image inside "field" is clicked on, rather than hovered?

        Loading editor
    • An click switch is possible with css. But I'm not sure that would work with an image. I found one but the html doesn't seem to be supported for this wiki [1]. The problem is that images have links and even with no link it will still link to the location. Maybe that can be fixed by adding it as an background.

        Loading editor
    • I go with Jens, onpress-listening is ill advised. Clicking might not be the best action to listen to. As this counts as clicking a link, and you will be presented a new page, or the floating gallery; thus overriding your hint text completely.

        Loading editor
    • Jens Ingels wrote: An click switch is possible with css. But I'm not sure that would work with an image. I found one but the html doesn't seem to be supported for this wiki [1]. The problem is that images have links and even with no link it will still link to the location. Maybe that can be fixed by adding it as an background.

      You can force an image to not have a link if you want:

      [[File:Wiki.png|link=]]

      Wiki

        Loading editor
    • Okay.

        Loading editor
    • Oops, forgot that one ><

        Loading editor
    • A FANDOM user
        Loading editor
Give Kudos to this message
You've given this message Kudos!
See who gave Kudos to this message
Community content is available under CC-BY-SA unless otherwise noted.