how to open a image in lightbox?

how to open a image in lightbox? - javascript

I want to open a image in lightbox like in this address using JavaScript.
this code i am using in HTML it works fine. but i want to use this code in JavaScript function.
<div class="imageRow">
<div class="single">
<img alt="" src="url" />
</div>
</div>
How to write it in JavaScript.
for example this code open a image in new window.i want code like this to open a image in Lightbox2 using classes that are in upper HTML code.
<script type="text/javascript">
function onListPhotoClicked(event) {
var position = event.getPosition();
var photo=event.getPhoto();
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/original/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
</script>
this code open a image in new tab.but i want that this code open image in lightbox2.
i am new in programming.please tell me in detail by writing code.
this is code of a panoramio.com widget.
<div>
<img border="0" height="0" src="http://3.bp.blogspot.com/-EHT3COGzPHY/UnTXKACCkMI/AAAAAAAAAuI/KXnLjT-6ovk/s1600/98289201.jpg" width="0" /></div>
<script src="http://www.panoramio.com/wapi/wapi.js?v=1" type="text/javascript"></script>
<style type="text/css">
#div_attr_ex .panoramio-wapi-images {
background-color: transparent;
}
</style>
<br />
<div id="div_attr_ex" style="float: center; margin: 5px 10px;">
<div id="photo_widget_id_a11">
</div>
<div id="photo_widget_id_b11">
</div>
<div id="photo_widget_id_c11">
</div>
</div>
<script type="text/javascript">
var sand = {'set': panoramio.PhotoSet.RECENT };
var sandRequest = new panoramio.PhotoRequest(sand);
var attr_ex_photo_options = {
'width': 600,
'height': 480,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_photo_widget = new panoramio.PhotoWidget(
'photo_widget_id_a11', sandRequest, attr_ex_photo_options);
var attr_ex_list_options = {
'width': 600,
'height': 110,
'columns': 6,
'rows': 1,
'croppedPhotos': true,
'disableDefaultEvents': [panoramio.events.EventType.PHOTO_CLICKED],
'orientation': panoramio.PhotoListWidgetOptions.Orientation.HORIZONTAL,
'attributionStyle': panoramio.tos.Style.HIDDEN};
var attr_ex_list_widget = new panoramio.PhotoListWidget(
'photo_widget_id_b11', sandRequest, attr_ex_list_options);
var attr_ex_attr_options = {'width': 300};
var attr_ex_attr_widget = new panoramio.TermsOfServiceWidget(
'photo_widget_id_c11', attr_ex_attr_options);
function onListPhotoClicked2(event) {
var position = event.getPosition();
var photo=event.getPhoto();
document . apple . banana . value = position;
if(photo){
MaximizeWindow(window.open('http://static.panoramio.com/photos/large/'+photo.getPhotoId()+'.jpg'));
}
}
function MaximizeWindow(hWnd){
hWnd.moveTo(0,0);
hWnd.resizeTo(screen.width, screen.height);
}
panoramio.events.listen(
attr_ex_photo_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked2(e); });
function onListPhotoClicked(event) {
var position2 = attr_ex_list_widget.getPosition();
attr_ex_list_widget.setPosition(position2+1);
var position = event.getPosition();
if (position !== null) attr_ex_photo_widget.setPosition(position);
document . apple . banana . value = position;
}
panoramio.events.listen(
attr_ex_list_widget, panoramio.events.EventType.PHOTO_CLICKED,
function(e) { onListPhotoClicked(e); });
attr_ex_photo_widget.enablePreviousArrow(true);
attr_ex_photo_widget.enableNextArrow(true);
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
function increase()
{
var temp = parseInt (document . apple . banana . value);
if (isNaN (temp))
return;
if (temp>=0 )
{
attr_ex_photo_widget.setPosition(temp);
attr_ex_list_widget.setPosition(temp);
document . apple . banana . value = temp;
}
else
{
attr_ex_photo_widget.setPosition(0);
attr_ex_list_widget.setPosition(0);
document . apple . banana . value = 0;
}
}
function startDownload()
{
var photo3=attr_ex_photo_widget.getPhoto();
var url='http://static.panoramio.com/photos/original/'+photo3.getPhotoId()+'.jpg';
window.open(url);
}
</script>
<form name="apple">
<input max="10000" maxlength="4" min="0" name="banana" size="4" type="number" />
<input onclick="increase ();" type="button" value="View" /></form>
<button onclick="startDownload()">Download</button>

Related

add hyperlink with images by button or Drag and save current state [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 months ago.
Improve this question
<style>
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
#media (max-width: 600px) {
.grid-item {
width: 100%;
}
}
img {
width: 100%;
}
a {
display: block;
text-align: center;
}
input[type="text"] {
width: 100%;
}
</style>
<div class="grid">
<div class="grid-item"><img src="image1.jpg" /></div>
<div class="grid-item"><img src="image2.jpg" /></div>
<div class="grid-item"><img src="image3.jpg" /></div>
<div class="grid-item"><img src="image4.jpg" /></div>
</div>
<form>
<input type="text" placeholder="Enter image URL" />
<input type="text" placeholder="Enter hyperlink URL" />
<button type="submit">Add item</button>
</form>
<script>
var grid = document.querySelector('.grid');
var gridItems = document.querySelectorAll('.grid-item');
var form = document.querySelector('form');
// Load the saved grid state from local storage
var gridState = JSON.parse(localStorage.getItem('gridState'));
if (gridState) {
for (var i = 0; i < gridState.length; i++) {
var gridItem = document.createElement('div');
gridItem.classList.add('grid-item');
gridItem.innerHTML = '<img src="' + gridState[i].imageUrl + '" />';
grid.appendChild(gridItem);
}
}
for (var i = 0; i < gridItems.length; i++) {
gridItems[i].addEventListener('click', function(event) {
window.location.href = this.querySelector('a').getAttribute('href');
});
}
form.addEventListener
('submit', function(event) {
event.preventDefault();
var imageUrl = this.querySelector('input[type="text"]').value;
var hyperlinkUrl = this.querySelector('input[type="text"]').value;
var gridItem = document.createElement('div');
gridItem.classList.add('grid-item');
gridItem.innerHTML = '<img src="' + imageUrl + '" />';
grid.appendChild(gridItem);
// Save the grid state to local storage
var gridState = [];
for (var i = 0; i < gridItems.length; i++) {
var imageUrl = gridItems[i].querySelector('img').getAttribute('src');
var hyperlinkUrl = gridItems[i].querySelector('a').getAttribute('href');
gridState.push({
imageUrl: imageUrl,
hyperlinkUrl: hyperlinkUrl
});
}
localStorage.setItem('gridState', JSON.stringify(gridState));
});
</script>
1.This is the full code I don't know why It isn't functional
2. Is there alternative way to save and change code itself? rather than use local storage?
I want functional code
Please help me, I am wandering for more than 24hours now

I suppose you want to take two inputs image's source link and the hyper link it redirects to and store these inputted values and get them when user visits site again.
1. You code was fine just that you were not getting values from those input fields. You can change.
var imageUrl = this.querySelector('input[type="text"]').value;
var hyperlinkUrl = this.querySelector('input[type="text"]').value;
to this (and add respective ids in their input tags)
var imageUrl = document.getElementById('image_url').value;
var hyperlinkUrl = document.getElementById('link').value;
<input id="image_url" type="text" placeholder="Enter image URL" />
<input id="link" type="text" placeholder="Enter hyperlink URL" />
See this my version of code here: https://jsfiddle.net/gktazfjw/
var grid = document.querySelector('.grid');
var gridItems = document.querySelectorAll('.grid-item');
var form = document.querySelector('form');
var tempLink = "https://robohash.org/"
// Load the saved grid state from local storage
var gridState = JSON.parse(localStorage.getItem('gridState'));
if (gridState) {
for (var i = 0; i < gridState.length; i++) {
var gridItem = document.createElement('div');
gridItem.classList.add('grid-item');
gridItem.innerHTML = '<a target="_blank" href="' + gridState[i].hyperlinkUrl + '"><img src="' + gridState[i].imageUrl + '" /></a>';
grid.appendChild(gridItem);
}
}
for (var i = 0; i < gridItems.length; i++) {
gridItems[i].addEventListener('click', function(event) {
window.location.href = this.querySelector('a').getAttribute('href');
});
}
form.addEventListener('submit', function(event) {
event.preventDefault();
var imageUrl = document.getElementById('image_url').value;
var hyperlinkUrl = document.getElementById('link').value;
alert(imageUrl + ": " + hyperlinkUrl)
var gridItem = document.createElement('div');
gridItem.classList.add('grid-item');
gridItem.innerHTML = '<img src="' + tempLink + imageUrl + '" />';
grid.appendChild(gridItem);
// Save the grid state to local storage
var gridState = [];
for (var i = 0; i < gridItems.length; i++) {
var imageUrl = gridItems[i].querySelector('img').getAttribute('src');
var hyperlinkUrl = gridItems[i].querySelector('a').getAttribute('href');
gridState.push({
imageUrl: imageUrl,
hyperlinkUrl: hyperlinkUrl
});
}
localStorage.setItem('gridState', JSON.stringify(gridState));
});
.grid {
display: flex;
flex-wrap: wrap;
}
.grid-item {
width: 50%;
}
#media (max-width: 600px) {
.grid-item {
width: 100%;
}
}
img {
width: 30%;
}
a {
display: block;
text-align: center;
}
input[type="text"] {
width: 100%;
}
<div class="grid">
<div target="_blank" class="grid-item">
<a href="https://example.com">
<img src="https://robohash.org/image1" />
</a>
</div>
<div target="_blank" class="grid-item">
<a href="https://example.com">
<img src="https://robohash.org/image2" />
</a>
</div>
<div target="_blank" class="grid-item">
<a href="https://example.com">
<img src="https://robohash.org/image3" />
</a>
</div>
<div target="_blank" class="grid-item">
<a href="https://example.com">
<img src="https://robohash.org/image4" />
</a>
</div>
</div>
<form>
<input id="image_url" type="text" placeholder="Enter image URL" />
<input id="link" type="text" placeholder="Enter hyperlink URL" />
<button type="submit">Add item</button>
</form>
2. Much better way is to store data in some kind of free cloud database like mongoDB, firebase, etc.
Local storage can be cleared by the user and is limited by the amount of data we can store, but is perfectly fine if it's just for practice , etc and you don't want to use your project for professional things.
But the thing is if you start using some database with your website then you will have to implement authentication logic too, to get only the desired data of any user.

var imageUrl = this.querySelector('input[type="text"]').value;
var hyperlinkUrl = this.querySelector('input[type="text"]').value
You can simply add it by using this code

Add 2 Webcam in one page with WebcamJS

I'm trying to add 2 or multiple webcam input with webcam.js from jhuckaby. But only one will works perfectly. And i'm following this tutorial
https://pixlcore.com/demos/webcamjs/demos/preview.html
Here's my javascript code:
Webcam.set({
width: 100,
height: 100,
force_flash: true,
image_format: 'jpeg'
});
// CAMERA 1
Webcam.attach('#my_camera');
function preview_snapshot() {
Webcam.freeze();
document.getElementById('pre_take_buttons').style.display = 'none';
document.getElementById('post_take_buttons').style.display = '';
}
function cancel_preview() {
Webcam.unfreeze();
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
}
function save_photo() {
// actually snap photo (from preview freeze) and display it
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results').innerHTML =
'<h5>Profil anda:</h5>' +
'<img src="'+data_uri+'"/>';
// swap buttons back
document.getElementById('pre_take_buttons').style.display = '';
document.getElementById('post_take_buttons').style.display = 'none';
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('mydataProfil').value = raw_image_data;
} );
}
// Camera 1 END
// CAMERA 2
Webcam.attach('#my_camera_ktp');
function preview_snapshot_ktp() {
Webcam.freeze();
document.getElementById('pre_take_buttons_ktp').style.display = 'none';
document.getElementById('post_take_buttons_ktp').style.display = '';
}
function cancel_preview_ktp() {
Webcam.unfreeze();
document.getElementById('pre_take_buttons_ktp').style.display = '';
document.getElementById('post_take_buttons_ktp').style.display = 'none';
}
function save_photo_ktp() {
Webcam.snap( function(data_uri) {
// display results in page
document.getElementById('results_ktp').innerHTML =
'<h5>Profil anda:</h5>' +
'<img src="'+data_uri+'"/>';
// swap buttons back
document.getElementById('pre_take_buttons_ktp').style.display = '';
document.getElementById('post_take_buttons_ktp').style.display = 'none';
var raw_image_data = data_uri.replace(/^data\:image\/\w+\;base64\,/, '');
document.getElementById('mydataProfilKTP').value = raw_image_data;
} );
}
And this is my camera 1 HTML code:
<center>
<div id="my_camera"></div>
<br>
<div id="pre_take_buttons">
<input type=button value="Take Foto" onClick="preview_snapshot()">
</div>
</center>
<div id="post_take_buttons" style="display:none" class="text-center">
<input type=button value="< Take again" onClick="cancel_preview()">
<input type=button value="Save >" onClick="save_photo()">
</div>
Camera 2 HTML code:
<center>
<div id="my_camera_ktp"></div>
<br>
<div id="pre_take_buttons_ktp">
<input type=button value="Take foto KTP" onClick="preview_snapshot_ktp()">
</div>
</center>
<div id="post_take_buttons_ktp" style="display:none" class="text-center">
<input type=button value="< take again" onClick="cancel_preview_ktp()">
<input type=button value="Save >" onClick="save_photo_ktp()">
</div>
The problem is if i use camera 1, camera 2 does'nt work, if i use camera 2 then camera 1 does'nt work. Function's name and id already different and unique, Camera 1 and 2 has same function and html, the difference only function's name and id. And then i use inspect element on my page, show me an error like this
Uncaught TypeError: this.getMovie(...)._snap is not a function
Any answer?

I think you can't achieve this by using that library. However, I solved this by using only javaScript. Here what you need to do.
HTML:
<div style="width: 100%;text-align:center;">
<video id="myCamer2" width="150" height="150" autoplay></video>
</div>
Script:
<script>
// second camera
let video = document.querySelector("#myCamer2");
let stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: false });
video.srcObject = stream;
</script>
You can learn more about this from https://usefulangle.com/post/352/javascript-capture-image-from-camera
and https://www.studytonight.com/post/capture-photo-using-webcam-in-javascript here.

jQuery fengyuanchen cropper plugin - getImageData() cannot get width/height

I am using fengyuanchen jQuery cropper
I have the cropper set to be responsive. This means that the displayed width/height of the image being cropped may not be the true native width/height. I need to get the displayed width/height so that I can calculate where to crop the original full-size image when applicable.
I read this example in the docs:
var imageData = $().cropper('getImageData');
However, console.log(imageData); returns this:
> n.fn.init {}
> __proto__ : Object[0]
/* Inside this is every custom defined js function */
If anyone has experience with this it would be a major help.
For anyone else with this issue:
I'm currently just grabbing the .width() of the .cropper-canvas object like this, but I would still appreciate if someone knew how to use the method properly.
var cropperCanvas = $('.cropper-canvas');
console.log('Width: '+cropperCanvas.width()+"\nHeight:"+cropperCanvas.height());

To access this information you must call these methods inside the 'built' function. Like so:
var $crop = $('.img');
$crop.cropper({
built: function() {
var canvasData = $crop.cropper('getCanvasData');
var cropBoxData = $crop.cropper('getCropBoxData');
var imageData = $crop.cropper('getImageData');
$('.cd').text('Canvas Data: ' + JSON.stringify(canvasData));
$('.cb').text('CropBox Data: ' + JSON.stringify(cropBoxData));
$('.id').text('Image Data: ' + JSON.stringify(imageData));
}
});
.container {
max-width: 800px;
}
.container .img {
width: 100%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/cropper/2.3.4/cropper.min.js"></script>
<div class="container">
<img class="img" src="http://www.beijingiphonerepair.com/wp-content/uploads/2011/10/iphone4s_sample_photo_1.jpg" alt="">
</div>
<p class="cd"></p>
<p class="cb"></p>
<p class="id"></p>
It's a simple example just to show you the idea. Hope it helps.

Was having the same issues, not much help anywhere. Pieced together a solution from various places. Documentation/real-world examples of this plugin are sadly lacking, yet it's probably the best cropper script I've used
The form:
<div class="cropperOriginal">
<img id="image" src="/yourimage.jpg">
</div>
<form method="POST" action="test.php">
X: <input type="text" name="dataX" id="dataX" placeholder="X" value="" />
Y: <input type="text" name="dataY" id="dataY" placeholder="Y" value="" />
W: <input type="text" name="dataWidth" id="dataWidth" placeholder="width" value="" />
H: <input type="text" name="dataHeight" id="dataHeight" placeholder="height" value="" />
<input type="submit" />
</form>
<div class="img-preview"></div>
The javascript
<script>
window.addEventListener('DOMContentLoaded', function () {
var ele = $("#image");
var dataX = document.getElementById('dataX');
var dataY = document.getElementById('dataY');
var dataHeight = document.getElementById('dataHeight');
var dataWidth = document.getElementById('dataWidth');
ele.cropper({
aspectRatio: 4 / 3,
preview: '.img-preview',
crop: function (e) {
var imageData = ele.cropper('getData');
dataX.value = Math.round(imageData.left);
dataY.value = Math.round(imageData.top);
dataHeight.value = Math.round(imageData.height);
dataWidth.value = Math.round(imageData.width);
},
zoomable: false,
scalable: false,
movable: false,
background: true,
viewMode: 2
});
});
</script>
Hope this helps someone

Overlap Issue with div in HTML and JS

I am trying to rotate an image within a div using html and js. I have it working for the most part except for an overlapping issue: the image either covers up everything or overlaps during rotation. I thought I had resolved it with my js formula which sets the div size based on the image size, however it's not working and I'm not sure why. Any ideas?
<html>
<head>
<style>
#photoimg {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#photo {
position: relative;
}
</style>
</head>
<body>
<form action="#" method="post">
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1"/>
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>';
//Get larger edge
var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2) );
//Adjust container to fix image roted 90deg
document.getElementById('photo').offsetWidth(largerPhotoDimension);
document.getElementById('photo').offsetHeight(largerPhotoDimension);
});
</script>
<button id="button">rotate</button>
<script>
document.getElementById('button').onclick = function(){
var curr_value = document.getElementById('photoimg').style.transform;
var new_value = "rotate(90deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 90;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photoimg').style.transform = new_value;
};
</script>
</body>
</html>

Just add these two lines
document.getElementById('photoimg').style.height = document.getElementById("photo").offsetWidth;
document.getElementById('photoimg').style.width = document.getElementById('photo').offsetHeight;
below
document.getElementById('photoimg').style.transform = new_value;

Thanks Guys. I fixed the issue using the following code.
<html>
<head>
<style>
#photoimg {
top: 0;
bottom: 0;
left: 0;
right: 0;
}
#photo {
position: relative;
}
</style>
</head>
<form action="#" method="post">
<input type="url" name="imglink" id="imglink" placeholder="Insert image URL here" /><br>
<input type="button" value="Show Image" id="btn1"/>
</form>
<div id="photo"></div>
<script>
document.getElementById('btn1').addEventListener('click', function(){
document.getElementById('photo').innerHTML = '<img id="photoimg" src="'+ document.getElementById('imglink').value +'" alt="Image"/>';
//Get larger edge
var largerPhotoDimension = Math.sqrt(Math.pow(document.getElementById('photoimg').offsetWidth , 2) + Math.pow(document.getElementById('photoimg').offsetHeight ,2) );
var marginVert = (largerPhotoDimension - document.getElementById('photoimg').offsetHeight)/2;
var marginHorz = (largerPhotoDimension - document.getElementById('photoimg').offsetWidth)/2;
//Adjust container to fix image rotated 90deg
document.getElementById('photo').style.marginRight = marginHorz;
document.getElementById('photo').style.marginLeft = marginHorz;
document.getElementById('photo').style.marginBottom = marginVert;
document.getElementById('photo').style.marginTop = marginVert;
});
</script>
<button id="button">rotate</button>
<script>
document.getElementById('button').onclick = function(){
var curr_value = document.getElementById('photoimg').style.transform;
var new_value = "rotate(45deg)";
if(curr_value !== ""){
var new_rotate = parseInt(curr_value.replace("rotate(","").replace(")","")) + 45;
new_value = "rotate(" + new_rotate + "deg)";
}
document.getElementById('photoimg').style.transform = new_value;
};
</script>
</body>
</html>

image preview in fancybox and responsive filemanager not work (Empty string passed to getElementById().)

I work with responsivefilemanager and fancybox for upload and add images_url and image preview gallery.when i click image in filemanager fancybox close and add preview to image box(NO IMAGE) BUT in fancybox 2.1.5 when i click in image fancybox not closed and not show image preview. my code work with fancybox 1.3.4 but with last version 2.1.5 not worked.
JS:
$(document).ready(function() {
$(function() {
$('.thumbcheck').tooltip();
$('#btn-sub').click(function() {
$('#name').removeClass('has-error');
$('#err_name').hide();
name= $('#gallery_name').val();
if(name.length==0){
$('#name').addClass("has-error");
$('#err_name').show();
}
else
$("#form-gallery").submit();
});
$('#append').on('click', '.btn-remove', function() {
var parent = $(this).closest('.form-group');
var input = parent.find('.width100').next('input').val();
if($('input[name=cover]').val()==input ){
$('input[name=cover]').val('');
}
parent.remove();
});
$("#checkall").on('ifChecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("check");
$('#action-box').show();
});
$("#checkall").on('ifUnchecked', function(event) {
//Check all checkboxes
$("input[type='checkbox']", ".table-striped").iCheck("uncheck");
$('#action-box').hide();
});
$(".checkbox").on('ifChecked', function(event) {
$('#action-box').show();
});
$(".checkbox").on('ifUnchecked', function(event) {
var length = $(".table-striped input[type='checkbox']:checked").length;
if ($(".table-striped input[type='checkbox']:checked").length === 0) {
$('#action-box').hide();
$("#selectAll").iCheck("uncheck");
}
});
$('.img-thumb').next().change(function() {
$('.img-thumb').attr('src', $('.img-thumb').next().val())
});
$('#btnAdd').click(function() {
var form_group = $('#form-group').html();
var new_id = rand();
var baseurl = $('#baseurl').html();
$('#upload').clone().attr('id', new_id);
$('#upload-img').clone().attr('id', 'img-' + new_id);
$('.thumbcheck').clone().attr('data-id',new_id);
$('#append').append(form_group);
$('#upload').attr('id', new_id);
$('#upload-img').attr('id', 'img-' + new_id);
$('.thumbcheck').eq(-2).attr('data-id',new_id);
$('#' + new_id).next('a').next('a').attr('href', baseurl + new_id);
$('#' + new_id).next('a').next('a').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function() {
var imgurl = $('#'+new_id).val();
var check = $('#append').find('.thumbcheck[data-id='+new_id+']').find('i');
console.log($('#append').find('.thumbcheck[data-id='+new_id+']'));
console.log(check);
console.log(check.attr('class'));
if(check.attr('class')=='fa icon-circle-blank'){
console.log('sd');
$('#thumb').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + new_id).attr('src', ''+imgurl);
}
}
});
$('.thumbcheck').tooltip();
});
$(document).on('click','.thumbcheck',function(){
var value = $('#'+$(this).data('id')).val();
if($(this).find('i').attr('class')=='fa icon-circle'){
$(document).find('.thumbcheck i').attr('class','fa icon-circle');
$(this).find('i').attr('class','fa icon-circle-blank');
$('input[name=cover]').val(value);
}
else {
return false;
}
});
$('.boxGetFile').fancybox({
'width': '75%',
'height': '90%',
'autoScale': false,
'transitionIn': 'none',
'transitionOut': 'none',
'type': 'iframe',
onClosed: function(link, index) {
var id = $(link).data('id');
var imgurl = $('#'+id).val();
var check = $(document).find('.thumbcheck[data-id='+id+']').find('i');
if(check.attr('class')=='fa fa-circle'){
$('input[name=cover]').val(imgurl);
}
if (imgurl.length > 0) {
$('#img-' + id).attr('src', ''+imgurl);
}
}
});
});
function rand() {
var text = "";
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for (var i = 0; i < 8; i++)
text += possible.charAt(Math.floor(Math.random() * possible.length));
return text;
}
});
HTML:
<div class="form-group">
<label class="col-sm-3 control-label"></label>
<div class="col-sm-9">
<a class='btn btn-primary btn-xs' id='btnAdd'>Add Image</a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
</div>
</div>
</div>
</div>
</div>
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
<div style="display: none;" id='form-group'>
<div class="form-group custom-cols">
<div class="col-sm-12 control-label">
<div class="col-sm-2">
<div class="input-append">
<div class='col-sm-10 no-pad'><img src="data:image/png;base64,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" id='upload-img' class="width100" />
<input name="image_url[]" id="upload" type="text" value="" style='display: none'>
<a class="width24 thumbcheck" data-toggle="tooltip" data-placement="bottom" title="Gallery Cover" data-id=""><i class="fa fa-circle-o"></i></a>
<a class="col-sm-8 no-pad boxGetFile"><h6>select image</h6></a>
</div>
</div>
</div>
<div class="col-sm-7 padding-left-8">
<input type="text" name='image_title[]' class="form-control" placeholder='Image title' />
<input type="text" name='image_alt[]' class="form-control" placeholder='Image alt' />
</div>
<div class="col-sm-1">
</div>
How do can i fix my problem ?
Worked Demo with fancybox 1.3.4 HERE
NOTWorked Demo with fancybox 2.1.5 HERE
NOTE: in demo please click in add image
In each click image I see this error in firebug console:

I think the elements provided in the question are not enough to provide an accurate answer but for the bounty I will guess ;)
After a quick look at the source code of your (none working) DEMO using fancybox v2.1.5, I found some issues you may need to fix in in order to have a working page :
1). You don't have a proper DOCTYPE (I meant, not DOCTYPE at all)
2). You have a stray </div> closing tag (line 179) just before the <div id="baseurl">
3). You have a stray <! opening (sort of) conditional comment (line 204)
4). Yo DON'T have a closing </html> tag
5). The base url issue:
You have this html line
<div id='baseurl' style="display:none">http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<</div>
Notice at the end of the line &field_id=<</div> : the extra < I think is a typo, isn't it?.
Then you have this variable:
var baseurl = $('#baseurl').html();
... which actually returns :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=<
If you run that url directly in your browser (out of fancybox) it does return the same js error while selecting the image in fancybox. What I think is the escaped html entities are somehow messing with the functionality of responsive file manager.
For instance, if you open the url without escaping the html entities (in a new tab/window) like :
http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=s7cJMxQl
...(excluding the < typo), the only error is when triggering the $.fancybox.close() method, which it does make sense.
I would recommend you to do either :
var baseurl = $("#baseurl").text(); // don't escape html entities
or set the value in a data attribute for a cleaner code like
<div id="baseurl" data-base="http://madenade.besaba.com/file/filemanager/dialog.php?type=2&field_id=" style="display:none"></div>
... then the variable
var baseurl = $("#baseurl").data("base");

We Keep Coding

JavaScript is the programming language of the Web.

how to open a image in lightbox? - javascript

Related

add hyperlink with images by button or Drag and save current state [closed]

Add 2 Webcam in one page with WebcamJS

jQuery fengyuanchen cropper plugin - getImageData() cannot get width/height

Overlap Issue with div in HTML and JS

image preview in fancybox and responsive filemanager not work (Empty string passed to getElementById().)

Categories

Resources