I'm filling bootstrap cards with an external json file via XML HttpRequest. This works, all information is shown in the cards.
Now I would like to press "More info" to open a bootstrap modal with more information about the item.
The problem is when I press "More info" the data of the first item1 is always taken.
I know that the solution is that I have to pass the id of the elements to the modal, so that the correct data of the elements can be retrieved.
But I don't understand how I can pass the id of an item to the modal?
JSON File
[{
"id": 1,
"name": "item1",
"price": "€5",
"size": "XS",
"color": "Green"
}, {
"id": 2,
"name": "item2",
"price": "€10",
"size": "S",
"color": "Yellow"
}, {
"id": 3,
"name": "item3",
"price": "€15",
"size": "M",
"color": "Blue"
}, {
"id": 4,
"name": "item4",
"price": "€20",
"size": "L",
"color": "Red"
}, {
"id": 5,
"name": "item5",
"price": "€25",
"size": "XL",
"color": "Gray"
}, {
"id": 6,
"name": "item6",
"price": "€30",
"size": "XXL",
"color": "Black"
}]
JS script of my program
<script>
const divRes = document.querySelector('#divResult');
myRequest = () => {
let xhr = new XMLHttpRequest();
xhr.open('GET', 'files/elements.json', true);
xhr.send();
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status != 200) {
divRes.innerHTML = `Error ${xhr.status}: ${xhr.statusText}`;
} else {
const arrResponse = JSON.parse(xhr.responseText);
divRes.innerHTML = createHTMLCard(arrResponse);
}
}
};
xhr.onerror = function() {
divRes.innerHTML = "Request failed";
};
}
createHTMLCard = (arrObj) => {
let res = '';
for (let i = 0; i < arrObj.length; i++) {
res +=
`<div class="col-lg-4 col-md-6 col-sm-12">
<div class="card m-2">
<div class="card-body">
<h5 class="card-title">${arrObj[i].name}</h5>
<p><strong>Prijs:</strong> ${arrObj[i].price}</p>
<button id="moreInfo" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">More info</button>
</div>
</div>
</div>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">${arrObj[i].name}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p><strong>Price:</strong> ${arrObj[i].price}</p>
<p><strong>Size:</strong> ${arrObj[i].size}</p>
<p><strong>Color:</strong> ${arrObj[i].color}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>`;
}
return res;
}
window.addEventListener('load', myRequest);
</script>
Bootstrap cards
Bootstrap modal
the problem is that the button refers to a html id. In this case every Button has the target exampleModal
<button [..] data-bs-target="#exampleModal">More info</button>
So you need to create for every button a diffrent target and add something like #exampleModal-"+${arrObj[i].id}+"
Same you need to do on the modal class where the button refers.
<div class="modal fade" id="exampleModal-"+${arrObj[i].id}+" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">`
Related
My vue data is
data: function() {
return {
results: {
"items": [
{
"id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
"name": "Gsbssbb",
"price": 9559,
"colour": {
"name": "Blue",
"hex": "FF0000AE"
},
"amountAvailable": 949
},
{
"id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
"name": "Vsbdbdb",
"price": 6559,
"colour": {
"name": "Purple",
"hex": "FF800080"
},
"amountAvailable": 6595
}
],
}
The template is
<div class="column asoebi-list-item" v-for="result in results.items">
<div id="item-event" class="columns is-mobile">
<div class="column auto has-text-left">
<p class="item-name">{{result.name}}</p>
<p class="item-price" id="item-price"> {{result.price}}</p>
<p class="item-units">{{result.amountAvailable}} Units Remaining · {{result.colour.name}}</p>
</div>
<div class="column is-2">
<button id="number-spinner-up" class="o-button button-bottom" type="button" onclick="this.parentNode.querySelector('[type=number]').stepUp();">
+
</button>
<input id="count-input" type="number" name="number" min="0" max="900" v-model="count">
<button id="number-spinner-down" class="o-button button-top" type="button" onclick="this.parentNode.querySelector('[type=number]').stepDown();">
-
</button>
</div>
</div>
</div>
As i loop through each data and display them, How can I add event to hide and un-hide div with number id "number-spinner" class and buttons on each element displayed.
I have this already written, but it only affects the first item even if I click on other items.
let allItems = document.querySelectorAll("#item-event");
for (let i = 0; i <= allItems.length; i++) {
allItems[i].addEventListener("click", () => {
this.toggleSpinner()
});
}
toggleSpinner: function() {
let countInput = document.getElementById("count-input");
countInput.style.visibility = "visible"
let theElementStyle1 = getComputedStyle(document.getElementById("number-spinner-up"));
let theElementStyle2 = getComputedStyle(document.getElementById("number-spinner-down"));
if(theElementStyle1.visibility === "hidden") {
document.getElementById("number-spinner-up").style.visibility = "visible";
}
else {
if(countInput.value === "0") {
countInput.style.visibility = "hidden"
}
document.getElementById("number-spinner-up").style.visibility = "hidden";
}
if(theElementStyle2.visibility === "hidden") {
document.getElementById("number-spinner-down").style.visibility = "visible";
}
else {
if(countInput.value === "0") {
countInput.style.visibility = "hidden"
}
document.getElementById("number-spinner-down").style.visibility = "hidden";
}
},
I just started with vue.. please forgive my sloppyness
It is always better to keep jQuery away from Vue, since it is having its own functionalities to handle most of the requirements.
I'm not clear which div should set for toggle the view. So I added one link to toggle it. Hope this will help.
<div class="column asoebi-list-item" v-for="result in results.items">
<div id="item-event" class="columns is-mobile">
<div class="column auto has-text-left">
<p class="item-name">{{result.name}}</p>
<p class="item-price" id="item-price"> {{result.price}}</p>
<p class="item-units">{{result.amountAvailable}} Units Remaining · {{result.colour.name}}</p>
</div>
<div class="column is-2" v-show="result.active">
<button id="number-spinner-up" class="o-button button-bottom" type="button"
onclick="this.parentNode.querySelector('[type=number]').stepUp();">
+
</button>
<input id="count-input" type="number" name="number" min="0" max="900" v-model="result.count">
<button id="number-spinner-down" class="o-button button-top" type="button"
onclick="this.parentNode.querySelector('[type=number]').stepDown();">
-
</button>
</div>
toggle
</div>
</div>
Also, made some changes to the array results to handle the v-model and toggle functionality
data: () => {
return {
results: {
"items": [
{
"id": "770c257b-7ded-437c-99b5-3b8953b5be3a",
"name": "Gsbssbb",
"price": 9559,
"colour": {
"name": "Blue",
"hex": "FF0000AE"
},
"amountAvailable": 949,
"count": null,
"active": true
},
{
"id": "8ecc6558-0c16-4497-b742-5eb5cb28c572",
"name": "Vsbdbdb",
"price": 6559,
"colour": {
"name": "Purple",
"hex": "FF800080"
},
"amountAvailable": 6595,
"count": null,
"active": true
}
],
}
}
},
You are using Vue ! Do Not Focus On Operating The DOM ! You are not using jQuery ! Read Vue DOCs before coding !
<script>
$(document).ready(function(){
//get the pie chart canvas
var cData = JSON.parse(`<?php echo $chart_data; ?>`);
var data = {
// labels: cData.label,
datasets: [{
label: "Users Count",
data: cData.data,
backgroundColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderColor: [
"#FF0000",
"#FFFF00",
"#008000",
],
borderWidth: [1, 1, 1]
}]
};
var options = {
responsive: true,
title: {
display: true,
position: "top",
text: "All Subject Progress",
fontSize: 18,
fontColor: "#111"
},
legend: {
display: true,
position: "bottom"
// labels: {
// fontColor: "#333",
// fontSize: 16
// }
}
};
var canvas = document.getElementById("pie-chart");
var ctx = canvas.getContext("2d");
var myNewChart = new Chart(ctx, {
type: 'pie',
data: data
});
canvas.onclick = function(evt) {
var activePoints = myNewChart.getElementsAtEvent(evt);
if (activePoints[0]) {
var chartData = activePoints[0]['_chart'].config.data;
var idx = activePoints[0]['_index'];
var label = chartData.labels[idx];
var value = chartData.datasets[0].data[idx];
var url = "http://example.com/?label=" + label + "&value=" + value;
//console.log(url);
//alert(url);
$("#myChartmodal").modal("show");
}
};
});
</script>
<div id="myChartmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
In this code I am creating pie-chart where it working perfectly. Now, I want to show bootstrap modal when I canvas.onclick. Here, What happen when I click on canvas.onclick only alert message are showing right now but $("#myChartmodal").modal("show"); is not working I don't know why. So, How can I open bootstrap modal after click on every slice of pie-chart? Please help me.
Thank You
Your show modal code should work as shown below, just need to include the bootstrap libraries as shown below
$(function(){
$('show').on('click', function(){
$('#myChartmodal').modal('show');
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div id="myChartmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<input type="button" value="Show Popup" id="show" data-toggle="modal" data-target="#myChartmodal">
I am using Typeahead Jquery plugin. Each time I click on the button a Bootstrap modal will be shown and I can select multiple options inside my input.
my problem is :
When I close the modal and reopen it the previous selected values are still shown inside the input. I need to empty cache each time and reload my page so that next time the input will be empty.
I used different ideas when the modal is closed it will reset the input to empty but still not working.
here my ideas :
$('.typeahead').typeahead().bind('typeahead:closed', function () {
$(this).val("");
});
or
$("#myinput").val('');
Any suggestions please ? Here is my code. Thank you for your help.
$(document).ready(function() {
var dataDefaultColumns = [{
"name": "country",
"id": "country",
"type": "Shipment"
}, {
"name": "customer name",
"id": "customer name",
"type": "Shipment"
}, {
"name": "order number",
"id": "order number",
"type": "Serial"
}, {
"name": "line number",
"id": "line number",
"type": "Serial"
}];
typeof $.typeahead === 'function' && $.typeahead({
input: ".js-typeahead-input",
minLength: 0,
maxItem: false,
hint: true,
highlight: true,
searchOnFocus: true,
cancelButton: true,
mustSelectItem: true,
backdropOnFocus: true,
group: {
key: "type",
template: function(item) {
var type = item.type;
return type;
}
},
emptyTemplate: 'no result for {{query}}',
groupOrder: ["Shipment", "Serial"],
display: ["name"],
correlativeTemplate: true,
dropdownFilter: [{
key: 'type',
template: '<strong>{{type}}</strong> Report',
all: 'All Reports'
}],
multiselect: {
matchOn: ["id"],
data: function() {
var deferred = $.Deferred();
return deferred;
}
},
template: '<span>' +
'<span class="name">{{name}}</span>' +
'</span>',
source: {
groupName: {
data: dataDefaultColumns
}
}
});
$("#mybutton").click(function(){
$("#myModal").modal('show'); });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.2/jquery.typeahead.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-typeahead/2.10.6/jquery.typeahead.js"></script>
<button type="button" id="mybutton" class="btn btn-primary" data-target="#myModal">Click Me
</button>
<div class="modal fade" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">× </button>
<h4 class="modal-title">Default</h4>
</div>
<div class="modal-body">
<div class="typeahead__container">
<div class="typeahead__field">
<div class="typeahead__query">
<input id="myinput"
class="js-typeahead-input"
name="input[query]"
type="search"
placeholder="Search"
autofocus
autocomplete="on">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
On my webpage there are Gridster widgets.These widgets have images in them which can be deleted.Now I have a + button when user clicks on it a modal opens which shows list of images.Now I want users to select an image(click on it) and then press Add Image then that images should get added in the widget specified.
HTML:
<div class="gridster">
<ul>
</ul>
</div>
<button class="js-seralize btn btn-success mr-2">Serialize</button>
<textarea id="log"></textarea>
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Add Icons</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png">
<img src="https://png.icons8.com/metro/2x/chapel.png">
<img src="https://png.icons8.com/metro/2x/boy.png">
<img src="https://png.icons8.com/metro/2x/wacom-tablet.png">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Add Image</button>
</div>
</div>
</div>
</div>
JS:
var gridster;
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
widget_margins: [5, 5],
helper: 'clone',
serialize_params: function($w, wgd) {return {images: $w.find('textarea').val().trim() , col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y}},
resize: {
enabled: true
}
}).data('gridster');
var json = [{
"html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //3 Images
"col": 1,
"row": 1,
"size_y": 2,
"size_x": 2
}, {
"html":"https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
"col": 4,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 1 Image
"col": 6,
"row": 1,
"size_y": 2,
"size_x": 2
},
{
"html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", // 2 Images
"col": 1,
"row": 3,
"size_y": 1,
"size_x": 1
}, {
"html": "https://image.flaticon.com/icons/svg/67/67994.svg", //1 Image
"col": 4,
"row": 3,
"size_y": 1,
"size_x": 1
},
{
"html": "https://image.flaticon.com/icons/svg/67/67994.svg,https://d30y9cdsu7xlg0.cloudfront.net/png/802768-200.png", //2 Images
"col": 6,
"row": 3,
"size_y": 1,
"size_x": 1
}
];
for(var index=0;index<json.length;index++) {
var images = json[index].html.split(',');
var imageOutput = "";
for(var j = 0; j < images.length; j++) {
imageOutput += '<div class="imagewrap"><img src='+ images[j] +'> <input type="button" class="removediv" value="X" /></div></div>';
}
gridster.add_widget('<li class="new" ><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
}
$('.removediv').on('click', function () {
$(this).closest('div.imagewrap').remove();
});
$(document).on("click", ".delete-widget-button", function() {
var gridster = $(".gridster ul").gridster().data('gridster');
gridster.remove_widget($(this).parent());
});
$('.js-seralize').on('click', function () {
var s = gridster.serialize();
$('.gridster ul li').each((idx, el)=>{ // grab the grid elements
s[idx].html = $('textarea', el).html(); // add the html key/values
json_variable=JSON.stringify(s)
});
$('#log').val(json_variable);
});
$(document).on("click", ".addmorebrands", function() {
$('#exampleModalCenter').modal('show');
});
I am miserably struck with selecting a specific image and adding it to particular widget.Any help will be really great
Fiddle Link
See the example I left you - https://jsfiddle.net/g9yxtwv0/49/
The changed code -
HTML
<input type="radio" name="image" id="image_1" value="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png">
<label for="image_1"><img src="https://cdnd.icons8.com/wp-content/uploads/2015/07/Run-Command-100.png"></label>
<input type="radio" name="image" id="image_2" value="https://png.icons8.com/metro/2x/chapel.png">
<label for="image21"><img src="https://png.icons8.com/metro/2x/chapel.png"></label>
<input type="radio" name="image" id="image_3" value="https://png.icons8.com/metro/2x/boy.png">
<label for="image_3"><img src="https://png.icons8.com/metro/2x/boy.png"></label>
<input type="radio" name="image" id="image_4" value="https://png.icons8.com/metro/2x/wacom-tablet.png">
<label for="image_4"><img src="https://png.icons8.com/metro/2x/wacom-tablet.png"></label>
<button type="button" class="btn btn-primary add-button">Add Image</button>
JS
$('.add-button').click(function () {
var widgetEle = $('ul').find("[data-id='" + widgetId + "']");
widgetEle.find('textarea').before('<div class="imagewrap"><img src="'+$('input[name=image]:checked').val()+'"> <input type="button" class="removediv" value="X"></div>');
});
// -------------
$(document).on("click", ".addmorebrands", function() {
widgetId = $(this).parent().attr('data-id'); // get index of widget
$('#exampleModalCenter').modal('show');
});
GRIDSTER
gridster.add_widget('<li class="new" data-id="'+ index +'"><button class="addmorebrands" style="float: left;">+</button><button class="delete-widget-button" style="float: right;">-</button>' + imageOutput + '<textarea>'+json[index].html+'</textarea></li>',json[index].size_x,json[index].size_y,json[index].col,json[index].row);
Now you just have to stylise the radios.
I have created a model for viewing images when a user clicks on the images. The problem is I when I try to access the images from the gallery image inside the modal content it doesn't work. Only a blank popup shows. I want the pictures from the image gallery to be displayed.
I need to know which code I can use to access the gallery image inside the modal content.
<body>
<script type="text/javascript">
var gallery = [
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
},
]
function view(imgsrc) {
vieww = window.open(imgsrc, 'viewwin', 'width=600,height=300');
}
function RenderHtml() {
var output = "";
for (i = 0; i < gallery.length; ++i) {
output += '<div class="gallery"><a target="_blank" rel="noopener
noreferrer">';
output += ' <a target="_blank" rel="noopener noreferrer">';
output += ' <img src="' + gallery[i].img + '"
onclick="view("' + gallery[i].img + '")" data-toggle="modal" data-
target="#myModal" alt="Forest" width="600" height="400" /';
output += ' </a>';
output += ' <div class="desc">' + gallery[i].text + '</div>';
output += '</div>';
}
document.getElementById('output').innerHTML = output;
}
window.onload = function () {
RenderHtml();
}
</script>
<div id="output">
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×
</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<!-- I want images from gallery array to be shown here when
user clicks on any of the images -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-
dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</body>
</html>
Hi this link helps you.Just change this (window.open (imgsrc, 'viewwin', 'width = 600, height = 300')) because bootstrap is a nice solution for this :))
<div id="output">
</div>
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
</div>
</div>
</div>
<script>
var gallery = [
{
"img": "b2cccefb117b138e087ef1ef986f6bb5.jpg",
"text": "Add a description of the image heree",
} //, ....
]
function RenderHtml() {
var output = "";
for (i = 0; i < gallery.length; ++i) {
output += '<a href="#" class="pop">'+
'<img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg" style="width: 400px; height: 264px;">'+
'</a>';
}
document.getElementById('output').innerHTML = output;
}
$( document ).ready(function() {
RenderHtml();
$('.pop').on( "click", function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>