I have a question
I have this code. The code used to display a gallery, and it works perfect. I want now that when you click on any picture I show it in bigger resolution. But when I put the href tag, the images not appear, if the link appears, but the images not appear.
<div class="container">
<div id="freewall" class="free-wall"></div>
<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><img src='img/col1/{index}.jpg' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 24;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
</div>
Images may not appear when I put the tag href
var temp = "<div class='brick' style='width:{width}px;'><a href='img/col1/{index}.jpg'><img src='img/col1/{index}.jpg' width='100%'></a></div>";
Appears the link, but not the images.
Any help I'm appreciate. Thanks
I think more easily you can do is.
.style1{
display:block;
width:100%;
}
add this class to your a tag
<a class="style1" href='img/col1/{index}.jpg'>
Hope that helps
Edited:
The problem seems here.
.replace("{index}", i + 1);
use this.
.replace("/{index}/g", i + 1);
Related
I need to modify a pasted image inside a contenteditable div: resize it proportionately, add borders, etc... Perhaps this can be achieved by adding a className that will alter the necessary CSS properties.
The problem is that I don't know how to reference the focused, i.e. the active, the clicked-upon image or any element for that matter.
This is the HTML that I am trying to use
<!DOCTYPE html>
<html>
<body>
<div contenteditable="true">This is a div. It is editable. Try to change this text.</div>
</body>
</html>
Using css, html and javascript
Your editable content should be inside a parent div with an id or class name, you can even have different divs for images and such.
Then it is as simple as having css like so:
#editableContentDiv img {
imgProperty: value;
}
Then you can have javascript like so:
function insertImage(){
var $img = document.querySelector("#editableContentDiv img");
$img.setAttribute('class','resize-drag');
}
Eventually if you have more than one img inside the same div you can use querySelectorAll instead of querySelector and then iterate through the img tags inside same div.
I beleive that should at least give you an idea of where to start with what you want.
Similar example
I found this gist that seems to have similar things to want you want but a bit more complicated.
function resizeMoveListener(event) {
var target = event.target,
x = (parseFloat(target.dataset.x) || 0),
y = (parseFloat(target.dataset.y) || 0);
// update the element's style
target.style.width = event.rect.width + 'px';
target.style.height = event.rect.height + 'px';
// translate when resizing from top or left edges
x += event.deltaRect.left;
y += event.deltaRect.top;
updateTranslate(target, x, y);
}
function dragMoveListener(event) {
var target = event.target,
// keep the dragged position in the data-x/data-y attributes
x = (parseFloat(target.dataset.x) || 0) + event.dx,
y = (parseFloat(target.dataset.y) || 0) + event.dy;
updateTranslate(target, x, y);
}
function updateTranslate(target, x, y) {
// translate the element
target.style.webkitTransform =
target.style.transform =
'translate(' + x + 'px, ' + y + 'px)';
// update the position attributes
target.dataset.x = x;
target.dataset.y = y;
}
function insertImage() {
var $img = document.createElement('img');
$img.setAttribute('src', 'https://vignette.wikia.nocookie.net/googology/images/f/f3/Test.jpeg/revision/latest?cb=20180121032443');
$img.setAttribute('class', 'resize-drag');
document.querySelector(".container-wrap").appendChild($img);
var rect = document.querySelector(".container-wrap").getBoundingClientRect();
$img.style.left = rect.left;
$img.style.top = rect.top;
}
function dataTransfer() {
//cleanup
var $out = document.querySelector(".out-container-wrap");
while ($out.hasChildNodes()) {
$out.removeChild($out.lastChild);
}
//get source
var source = document.querySelector('.container-wrap')
//get data
var data = getSource(source);
//add data to target
setSource($out, data);
}
/**
* Get data from source div
*/
function getSource(source) {
var images = source.querySelectorAll('img');
var text = source.querySelector('div').textContent;
//build the js object and return it.
var data = {};
data.text = text;
data.image = [];
for (var i = 0; i < images.length; i++) {
var img = {}
img.url = images[i].src
img.x = images[i].dataset.x;
img.y = images[i].dataset.y;
img.h = images[i].height;
img.w = images[i].width;
data.image.push(img)
}
return data;
}
function setSource(target, data) {
//set the images.
for (var i = 0; i < data.image.length; i++) {
var d = data.image[i];
//build a new image
var $img = document.createElement('img');
$img.src = d.url;
$img.setAttribute('class', 'resize-drag');
$img.width = d.w;
$img.height = d.h;
$img.dataset.x = d.x;
$img.dataset.y = d.y;
var rect = target.getBoundingClientRect();
$img.style.left = parseInt(rect.left);
$img.style.top = parseInt(rect.top);
//transform: translate(82px, 52px)
$img.style.webkitTransform = $img.style.transform = 'translate(' + $img.dataset.x + 'px,' + $img.dataset.y + 'px)';
//$img.style.setProperty('-webkit-transform', 'translate('+$img.dataset.x+'px,'+$img.dataset.y+'px)');
target.appendChild($img);
}
//make a fresh div with text content
var $outContent = document.createElement('div')
$outContent.setAttribute('class', 'out-container-content');
$outContent.setAttribute('contenteditable', 'true');
$outContent.textContent = data.text;
target.appendChild($outContent);
}
interact('.resize-drag')
.draggable({
onmove: dragMoveListener,
inertia: true,
restrict: {
restriction: "parent",
endOnly: true,
elementRect: {
top: 0,
left: 0,
bottom: 1,
right: 1
}
}
})
.resizable({
edges: {
left: true,
right: true,
bottom: true,
top: true
},
onmove: resizeMoveListener
})
.resize-drag {
z-index: 200;
position: absolute;
border: 2px dashed #ccc;
}
.out-container-content,
.container-content {
background-color: #fafcaa;
height: 340px;
}
#btnInsertImage {
margin-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="http://code.interactjs.io/interact-1.2.4.min.js"></script>
</head>
<body>
<button id="btnInsertImage" onclick="insertImage()">Insert Image</button>
<div class="container-wrap">
<div class="container-content" contenteditable="true">This is the content of the container. The content is provided along with the image. The image will be moved around and resized as required. The image can move within the boundary of the container.</div>
</div>
<button id="btnSubmit" onclick="dataTransfer()">Submit</button>
<div class="out-container-wrap">
</div>
</body>
</html>
Source
This is what I tried and it seems to be working - at least on my system, the snippet I made does not work unfortunately.
function getSelImg(){
var curObj;
window.document.execCommand('CreateLink',false, 'http://imageselectionhack/');
allLinks = window.document.getElementsByTagName('A');
for(i = 0; i < allLinks.length; i++)
{
if (allLinks[i].href == 'http://imageselectionhack/')
{
curObj = allLinks[i].firstChild;
window.document.execCommand('Undo'); // undo link
break;
}
}
if ((curObj) && (curObj.tagName=='IMG'))
{
//do what you want to...
curObj.style.border = "thick solid #0000FF";
}
}
<!DOCTYPE html>
<html>
<body>
<input type="button" onclick="getSelImg()" value="set img border">
<div contenteditable="true">This is a div.<br>
It is editable.<br>
Try to paste an image here:<br>
###########################<br>
<br>
<br>
<br>
###########################
</div>
</body>
</html>
Trying to use freewall in a custom wordpress theme and I just keep getting a blank screen.
Was trying to use the flex-layout and used the code in my template:
<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><img src='/uploads/TFC/{index}.jpg' width='100%'></div>";
var w = 1, h = 1, html = '', limitItem = 21;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
URL is correct for the image and tested already. The JS is loaded in functions.php:
wp_enqueue_script( 'freewall-js', get_template_directory_uri() . '/bootstrap/js/freewall.js', array( 'jquery' ) );
Also already in the headers.php:
<?php wp_enqueue_script("freewall-js"); ?>
Still no clue why it's not working. i checked the console and the only clue I have is that this line has an error:
$("#freewall").html(html);
It says it's not a function. Any idea how I can fix?
I have this javascript code which ran fine so far :
<div id="freewall" class="free-wall"></div>
<script type="text/javascript">
var temp = "<a class='fancybox' rel='group' href='graphics/tattoos/hd/{index}.jpg'>
<div class='brick' style='width:{width}px;'>
<img src='graphics/tattoos/sd/{index}.jpg' width='100%'>
</div>
</a>";
var w = 1, h = 1, html = '', limitItem = 5;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace(/{index}/g, i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
</script>
You can see the result at : http://rimetattoo.com/index.php?p=tattoos
I am rewriting this website using AngularJS (mostly for training), and put the same code in a template being used as a view. When I run the app in Chrome, I get an exception "Unexpected token ILLEGAL" in angular.js:12330.
I am pretty new to Angular and I am supposing that something must be wrong in the syntax I am using there, because when I remove this script, everything is okay.
Can somebody give me a heads up on what is going on there ?
Thanks a lot !
Basically i want to loop through the html and get all the pictures and overlay a small button on them on hover, so when the user is clicking on that button, a bunch of info about that picture will appear. Right now i can overlay a small icon over a photo that will generate a popup when it's clicked, but i don't know how to dynamically add a icon on all photos on hover. This is what i've done so far http://jsfiddle.net/s5sp1h6e/1/
//Getting all the images
function getAllImages()
{
var images = document.getElementsByTagName('img');
var srcList = [];
for(var i = 0; i < images.length; i++)
{
srcList.push(images[i].src);
}
}
I've found a script that overlays a image over all images but every time i'm changing the size of the image i'm overlaying, the script stops working and i can't understand why.
If i want to change in this line the width and the height to be given hardcoded, the script stops working.
var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' + img.width() + '" height="' + img.height() + '"/>') bla bla..
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function()
{
var overlayImg = 'http://www.privdog.com/PrivDog/logo-medium.png';
var useOnAllImages = true;
// Preload the pixel
var preload = new Image();
preload.src = overlayImg;
$('img').on('mouseenter touchstart', function(e)
{
// Only execute if this is not an overlay or skipped
var img = $(this);
if (img.hasClass('protectionOverlay')) return;
if (!useOnAllImages && !img.hasClass('protectMe')) return; // The script will be applied to all images. IF u don't want this -> useOnAllImages = false and class="protectMe"
// Get the real image's position, add an overlay
var pos = img.offset();
//var xx = overlayImg.offset();
//alert(xx.top);
var overlay = $('<img class="protectionOverlay" src="' + overlayImg + '" width="' + img.width() + '" height="' + img.height() + '"/>').css({position: 'absolute', zIndex: 9999999, left: pos.left, top: pos.top}).appendTo('body').bind('mouseleave', function()
{
setTimeout(function(){ overlay.remove(); }, 0, $(this));
});
if ('ontouchstart' in window) $(document).one('touchend', function(){ setTimeout(function(){ overlay.remove(); }, 0, overlay); });
});
}
Basically you need to add a an event handler for mouseover and mouseout. In the handler apply the necessary changes to the image.
$("img").on("mouseover", function () {
$(this).addClass("overlay-class");
var icon = $("<span class='icon' />").appendTo(document.body);
// logic to position the icon
}).on("mouseout", function () {
$(this).removeClass("overlay-class");
$(".icon").remove();
});
This is a slightly frustrating problem. I am using a third party library called Javascript InfoVis Toolkit to generate a canvas image chart.
So the chart is built and is inserted into a canvas. The background of that image is white (like styled in css), but when I convert the image (I've tried different libraries and opening a new window all together) it is black.
<script type="text/javascript">
function saveImage(div_id) {
var canvas = document.getElementById("chart2-canvas");
Canvas2Image.saveAsJPEG(canvas);
}
</script>
<script type="text/javascript">
function init(jsonString, num){
var json = jsonString
var inj = 'chart' + num
var st = new $jit.ST({
injectInto: inj,
offsetX:25,
offsetY:900,
transition: $jit.Trans.Quart.easeInOut,
orientation: 'top',
Node: {
height:100,
width:100,
type: 'rectangle',
color: '#EEE',
overridable: true
},
Edge: {
type: 'line',
color: '#512',
overridable: true
},
Label: {
type: 'Native',
color: '#000000'
},
Tips: {
enable: false,
onShow: function(tip, node, isLeaf, domElement){
var html = "<p><b>" + node.name + "</b></p><br/>";
var data = node.data
if(data.image) {
html += "<img src=\""+ data.image +"\" width=50 height=65 class=\"album\" />";
}
if(data.email) {
html += "<p>"+data.email+"</p>";
}
if(data.title) {
html += "<p>"+data.title+"</p>";
}
if(data.phone) {
html += "<p>"+data.phone+"</p>";
}
tip.innerHTML = html;
}
}/*,
onCreateLabel:function(label,node) {
alert(node.name);
alert(node.data);
var html = "<b>" + node.name + "</b>";
var data = node.data;
if(data.title) {
html += "<br/><br/><i>" + data.title + "</i>";
}
label.id = node.id + "_" + num;
label.innerHTML = html;
var style = label.style;
style.width = 100 + 'px';
style.height = 100 + 'px';
style.cursor = 'pointer';
style.fontSize = '0.8em';
style.textAlign = 'center';
style.color='#321';
}*/
});
st.loadJSON(json);
st.compute();
st.onClick(st.root);
}
</script>
Save Image
<g:each in="${allJSON}" status="h" var="jsonInstance">
<div id="chart${h+1}">
<script type="text/javascript">
init(${jsonInstance}, ${h+1});
</script>
</div>
</g:each>
To recap:
I generate the charts in the code, all of which have a white background (which is right)
I save the image of the chart 2 (as a test), but the image that is saved is BLACK - apparently ignoring the canvas background.
Thanks for all help!
Are you sure the canvas doesn't have a transparent background? JPEGs don't support transparent backgrounds.
If it does have a transparent background, try drawing a white background on it first, then save it as a JPEG.