Show/Hide Images

[R3bify]

Alright, this is pretty simple. You can show/hide images inline.

We're going to be modifying the replaceBBCodeImage function, and adding another one that will handle the image toggling.

in js/chat.js:

replaceBBCodeImage: function(url) {

if(this.settings['bbCodeImages']) {

if (!arguments.callee.regExpUrl) {

arguments.callee.regExpUrl = new RegExp(

this.regExpMediaUrl,

''

);

}

if(!url || !url.match(arguments.callee.regExpUrl))

return url;

url = url.replace(/\s/gm, this.encodeText(' '));

var maxWidth = this.dom['chatList'].offsetWidth-50;

var maxHeight = this.dom['chatList'].offsetHeight-50;

var randNum = Math.floor((Math.random() * 10000) + 15000);

return '<a href="'

     + this.replaceBBCode(url)

     + '" target="_blank" id=link_' + randNum + ' >View Original Link</a> | <a id="showHide_' + randNum + '" href="javascript:ajaxChat.showHideImage(' + randNum + ')" >Hide</a><br />'

     + '<a href="'

     + this.replaceBBCode(url)

     + '" data-lightbox="random-image"><img id="img_' + randNum + '" src="'      

     + this.replaceBBCode(url)

     + '" class="bbCodeImage" style="max-width:'

     + maxWidth

     + 'px; max-height:'

     + maxHeight

     + 'px;" onload="ajaxChat.updateChatlistView();" onerror="this.src=\'img/delete.png\'" /></a><br/>';

}

return url;

},

 

showHideImage: function(num) {

var element = document.getElementById("showHide_"+num);

if (element.innerHTML == "Hide") {

document.getElementById("img_"+num).src = "//0";

element.innerHTML = "Show";

} else {

document.getElementById("img_"+num).src = document.getElementById("link_"+num).href;

element.innerHTML = "Hide";

}

},

My function is modified to bring up a lightbox, so I'll cover the changes here in case yours isn't and would like to know what it going on.

var randNum = Math.floor((Math.random() * 10000) + 15000);

We're going to create a random number for each image.

" target="_blank" id=link_' + randNum + ' >View Original Link</a>  | <a id="showHide_' + randNum + '" href="javascript:ajaxChat.showHideImage(' + randNum + ')" >Hide</a>

So, I have a "View Original Link" link here, so that you can open the image full size, if you don't want to view it with the lightbox. I added an id so we can access it. I've also added a second link on that same line, it defaults to "Hide" but changes to "Show" when you press it. All this does is call the function that we're going to add in a moment.

<img id="img_' + randNum + '" src="' 

okay, so I've given the img an id, so that we can access it. That's all.

showHideImage: function(num) {

var element = document.getElementById("showHide_"+num);

if (element.innerHTML == "Hide") {

document.getElementById("img_"+num).src = "//0";

element.innerHTML = "Show";

} else {

document.getElementById("img_"+num).src = document.getElementById("link_"+num).href;

element.innerHTML = "Hide";

}

},

Alright, here is said function. What it does is take the random number, and use it to access the elements I described above.

It checks to see whether you want to show or hide the image, if you want to hide it, it sets the src to "//0" which is basically nothing, so it will show as a broken image. Feel free to change this up however you want. If you want to show the image, it uses the href of the "view original image" link to set the image back to what it was before. And then it changes the "Show/Hide" link to do the thing that it did not do just now.

Have fun.