Here is the scenario. I want to customize the built in plugin. Here is the scenario of default functionality.
Current Scenario by default
There are list if thumbnail images and when I click on an image then it just gets inserted in the area. Please see the default code below.
Code by default
var img = $('<img src="' + val.thumb + '" />');
$(img).click($.proxy(this.imageThumbClick, this));
imageThumbClick: function (e) {
var img = '<img id="image-marker" src="' + $(e.target).attr('rel') + '" alt="' + $(e.target).attr('title') + '" />';
var parent = this.getParent();
if (this.opts.paragraphy && $(parent).closest('li').size() == 0) img = '<p>' + img + '</p>';
this.imageInsert(img, true); // insert an image
}
My requirement
I want if I click on any thumbnail then it should mark selected and then if i click on button "insert image" then the selected image should insert. but my code is not working. Can you please help me to achieve my goal
My customized code
var img = $('<img src="' + val.thumb + '" />');
var thisImg;
$(img).click(function () {
$('img').removeClass('checked');
$(this).addClass('checked');
thisImg = $(this);
});
$('#insert-btn').click(function () {
thisImg.imageThumbClick();
});
imageThumbClick: function (e) {
var img = '<img id="image-marker" src="' + $(e.target).attr('rel') + '" alt="' + $(e.target).attr('title') + '" />';
var parent = this.getParent();
if (this.opts.paragraphy && $(parent).closest('li').size() == 0) img = '<p>' + img + '</p>';
this.imageInsert(img, true); // insert an image
}