3

I thinks it would be nice if we could toggle/ collapse images in a question or answer lets say I put in multiple images like this

Here is my first image

enter image description here

And here is a second

enter image description here

I could keep going here but I think you get the point

Should we have the option to collapse the images

You could even take this a step further and allow collapsing in other areas such as answers maybe an expand collapse all like you get in Gmail.

5
  • 2
    I fixed your post, and by the way, you're welcome Jun 5 '11 at 16:38
  • 1
    @Jeff: That's one way of fixing the typos in the images. :)
    – Jon Seigel
    Jun 5 '11 at 16:38
  • 2
    Why would you ever want to collapse unicorns? Do you have no soul?
    – random
    Jun 5 '11 at 16:39
  • @Jeff: Pl allow collapsing the code blocks too. Jun 5 '11 at 16:40
  • @Jeff: That's awesome I love it! @random good point but not all posts have pretty unicorns like those @yoda I know your question is not directed toward me but what is "PI"
    – mcgrailm
    Jun 5 '11 at 16:53
2

Sounds like a good greasemonkey/local script.

$('.post-text img').each(function(i,e){
    var $img = $(this);
    $('<span>').text('Expand/Collapse Image').css({
        fontSize: '10px',
        cursor: 'pointer'
    }).click(function(e){
        $img.slideToggle();
    }).after('<br>').insertBefore($img);
});

i.e. I personally prefer the image there, but I can see how others might want to collapse them. End result? Use a personal customization where you feel the site's lacking.


UserScript:

// ==UserScript==
// @name           Hide/Show StackExchange Images
// @description    Adds a small (clickable) text above all images in posts, allowing you to hide/show the image.
// @namespace      bradchristie
// @include        http://stackoverflow.com/*
// @include        http://*.stackoverflow.com/*
// @include        http://*.stackexchange.com/*
// ==/UserScript==

var jQuery = $ = unsafeWindow.jQuery;
(function(){
  $('.post-text img').each(function(i,e){
    var $img = $(this);
    $('<span>').text('Expand/Collapse Image').css({
      fontSize: '10px',
      cursor: 'pointer'
    }).click(function(e){
      $img.slideToggle();
    }).after('<br>').insertBefore($img);
  });
})(jQuery);
8
  • how would I use that ?
    – mcgrailm
    Jun 5 '11 at 18:01
  • @mcgrailm: Turn it in to a *.user.js file (and wrap it so it uses the unsafeWindow.jQuery found on these sites) and install it to your favorite (extensible) browser. Jun 5 '11 at 18:03
  • @mcgrailm: Updated answer; save the above code in to a <whatever>.user.js file on your desktop, then open that file in your browser and select install. (note: requires greasemonkey for FF or you can make it another browser plugin type). Jun 5 '11 at 18:09
  • that seems like a neat idea but I think it would be better suited to have this stuff in the sight itself IMHO maybe each user could have it in their prefs tab ?
    – mcgrailm
    Jun 5 '11 at 18:21
  • @mcgrailm: Honestly, in the (literally) 2 minutes it took me to implement, over the (probably between post code, prefs code, prefs wire-up, database schema change, re-plumbing, etc.--16 hours worth of coding?) I think a client solution is a lot better. But hey, that's just me. Jun 5 '11 at 18:23
  • @brad what doe "and wrap it so it uses the unsafeWindow.jQuery found on these sites)" this mean
    – mcgrailm
    Jun 5 '11 at 20:19
  • @mcgrailm: Just copy the code below the divider in to a file called SO_Collapsible_Images.user.js and save it on your desktop. Then open that file with firefox and it will work, as-is (with greasemonkey plugin, of course). Jun 5 '11 at 20:43
  • i stalled this on chrome but it made it into an extension how do I click it then ?
    – mcgrailm
    Dec 13 '11 at 15:28

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .