Profile code snippets

[RosemarieWitt]

While noodling around with Rose's profile, I ended up creating a simple image gallery of sorts for any risque or otherwise nsfw images. I figured it might not be ideal to have them load with the page at first, so I made the toggle only load the images once it's clicked. I realize that javascript profiles might not be everything's thing, but since the chat has that functionality, why not share any bits of code that seem useful?

In any case, the javascript function assumes the presence of two HTML elements; a div to place the images into and a button to act as the toggle. It also includes links to the full images, since you might have some CSS to set a max size for your images to prevent this little gallery from being pointlessly ginormous.

HTML:

Code: Select all

<button id="lewdbutton" class="btn btn-default" onclick="toggleActive(this)">Toggle Lewd Image display (or it will once I get this working)</button>
<div id='lewdarea' class="hidden"></div>

Javascript:

Code: Select all

//Place your image URLs in this, surrounded by "" and separated by commas (i.e. "url1","url2",etc)
var imageList = [];

function toggleActive(element) {
        if($('#lewdbutton').hasClass('btn-primary')){
        $('#lewdbutton').removeClass('btn-primary');
             $('#lewdbutton').addClass('btn-default');
             $('#lewdarea').addClass('hidden');
   } else {
        $('#lewdbutton').addClass('btn-primary');
             $('#lewdbutton').removeClass('btn-default');
             if ($('#image0').length == 0){
                  for (i = 0; i < imageList.length; i++){
                    var a1 = document.createElement('a');
                    $(a1).attr("href",imageList[i]);
                    $(a1).attr("target","_blank");
                    var img1 = document.createElement('img');
                    $(img1).appendTo(a1);
                    $(a1).appendTo('#lewdarea');
                    $(img1).attr("src",imageList[i]);
                    $(img1).attr("id","image"+i);
                  }
                }
             $('#lewdarea').removeClass('hidden');
   }
};

Lastly, here's the CSS I use to make my images smaller and otherwise prevent them from being a space hog:

CSS:

Code: Select all

#lewdarea img {
 max-width:500px;
 max-height:400px;
 width: auto;
 height: auto;
 margin-top: 5px;
 margin-left:3px;
}

[Vorrarkul]

I use this in the stylesheet section to center the profile images above the text:

Code: Select all

img.profile-image {
  display: block;
  margin-left: auto;
  margin-right: auto
}