Profile code snippets

Talk about things that involve the chatroom no one uses because Discord exists. Post about problems, bugs, suggestions, etc. to be ignored. But hey you can make a character profile so that's nifty.

Profile code snippets

Postby RosemarieWitt » Sun Aug 16, 2015 10:19 am

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;
}
User avatar
RosemarieWitt
 
Posts: 3
Joined: Sat Aug 15, 2015 7:49 pm

Re: Profile code snippets

Postby Vorrarkul » Sun Aug 16, 2015 12:47 pm

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
}
ImageImageImageImageImageImage
User avatar
Vorrarkul
 
Posts: 202
Joined: Sun Aug 09, 2015 3:54 pm


Return to About the Chatroom

Who is online

Users browsing this forum: No registered users and 4 guests