Exporting multiple images using cropit plugin - javascript

I'm using cropit plugin, it's working perfectly but does anybody know how to put multiple image previews and export them correctly without doing multiple functions? Here is the demo for the plugin, and here is the code:
$('#image-cropper').cropit();
// In the demos I'm passing in an imageState option
// so it renders an image by default:
// $('#image-cropper').cropit({ imageState: { src: { imageSrc } } });
// Exporting cropped image
$('.download-btn').click(function() {
var imageData = $('#image-cropper').cropit('export');
window.open(imageData);
});
.cropit-preview {
/* You can specify preview size in CSS */
width: 960px;
height: 540px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- This wraps the whole cropper -->
<div id="image-cropper">
<!-- This is where the preview image is displayed -->
<div class="cropit-preview"></div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<input type="range" class="cropit-image-zoom-input" />
<!-- This is where user selects new image -->
<input type="file" class="cropit-image-input" />
<!-- The cropit- classes above are needed
so cropit can identify these elements -->
</div>
<!-- This wraps the whole cropper -->
<div id="image-cropper">
<!-- This is where the preview image is displayed -->
<div class="cropit-preview"></div>
<!-- This range input controls zoom -->
<!-- You can add additional elements here, e.g. the image icons -->
<input type="range" class="cropit-image-zoom-input" />
<!-- This is where user selects new image -->
<input type="file" class="cropit-image-input" />
<!-- The cropit- classes above are needed
so cropit can identify these elements -->
</div>

Related

How show different random Image with button without restarting the page?

i want my popup (when a button is clicked) to show a random image out of my folder each time i click the button. I used html, css and javascript for my website.
The problem: it is the same random image each time. Only if i restart the page a different random image is showed.
What works right now: when i click the start-button a popup with a random image from that folder shows up (just how i want it) but if i click the close-button on my random picture and press the start-button again the same picture pops up again. Only if i restart my page then a new random picture will show when i press the start-button. But that picture stays the same, when i close the popup and want to start it again.
I want a random image everytime when i press the start-button without having to restart the page.
Do i use a boolean in javascript? Can i restart the function on its own? I have seen similar questions all the time but none of the solutions have worked for me kinda.
(the start-button is also a picture but it is a button) Sorry if the code is weirdly formatted, i am new to code <3
Thank you!!
My code:
HTML:
<div class="popup" id="popup-1">
<div class="overlay"> </div>
<div class="content">
<img class="imagelook"/> <!-- image is start-button -->
<div
class="close-btn"
onclick="togglePopup()"
onclick="generateRandomPicture(array)">× <!-- random image from folder -->
</div>
</div>
</div>
<body>
<button type="button" onclick="togglePopup()" class="imglook"></button> <!-- the start-button -->
</body>
Javascript:
function togglePopup(){
document.getElementById("popup-1").classList.toggle("active");
}
const imageArray =[
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const image = document.querySelector("img");
window.onload = () => generateRandomPicture(imageArray);
function generateRandomPicture(array){
let randomNum = Math.floor(Math.random() * imageArray.length);
image.setAttribute("src", imageArray[randomNum]);
}
Perhaps the following might help - coded to allow for multiple popup elements in conjunction with multiple button elements to trigger the display of different images in the respective popup div
const images = [
"zettel/9.png",
"zettel/8.png",
"zettel/10.png",
"zettel/11.png",
"zettel/12.png",
"zettel/13.png"
];
const _CN='active';
const bttnclickhandler=function(e){
// generate random image based upon array
let imgsrc=images[mt_rand(0,images.length-1)];
// assign image the new src
this.previousElementSibling.querySelector('img').src=imgsrc;
this.previousElementSibling.classList.add(_CN);
console.info(imgsrc)
};
const closeclickhandler=function(e){
e.target.closest('.popup').classList.remove(_CN);
this.previousElementSibling.src='';
console.clear();
};
// generate a random number between a & b
const mt_rand=(a,b)=>Math.floor( Math.random() * ( b - a + 1 ) + a );
// assign listeners to all pertinent elements
document.querySelectorAll('button.imglook').forEach(n=>n.addEventListener('click',bttnclickhandler));
document.querySelectorAll('div.close-btn').forEach(n=>n.addEventListener('click',closeclickhandler));
document.querySelectorAll('div.popup').forEach(n=>{
n.querySelector('img').src=images[mt_rand(0,images.length-1)]
})
.active{background:pink}
.popup{margin:1rem;}
.imglook{padding:1rem}
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>
<div class="popup">
<div class="overlay"></div>
<div class="content">
<img class="imagelook" />
<div class="close-btn">×</div>
</div>
</div>
<button type="button" class="imglook"></button>

Image not showing over text on form submit

Trying to create a meme generator that spits out an image and puts some input text over it.
I have gotten this to the point where it creates the image and a text html with everything the way I want it, but the text is not showing up over the image when I submit the form. I can tell that the html for the text is accepting and updating correctly with the input text, but text just not showing.
I tried setting the div wrapper to a position:relative and the text to position:absolute with a top setting, but no dice. Doing this just with vanilla JS..
Any help would be hugely appreciated!
here is the Code that I have:
'use strict';
let count=0;
// SUBMIT FORM
document.getElementById('memeInput').addEventListener('submit',function(e){
count++;
//prevent default
e.preventDefault();
//set image, top, and bottom to variables we can work with
let bottomText = document.getElementById('bottomText').value;
createMeme();
appendTop();
})
function createMeme(){
let image = document.getElementById('imageLink').value;
//create the 'meme'
let meme = document.createElement("IMG");
//add that meme to the memeSection
document.getElementById('memeSection').appendChild(meme);
//set the id = meme plus count so that multiple can be created at once, and then set the image equal to the image input link based on the form
meme.setAttribute("id", "meme"+count);
document.getElementById("meme"+count).src=image;
}
function appendTop(){
// put the top text in the image
let topText = document.getElementById('topText').value;
let top = document.createElement("H1");
document.getElementById('meme' + count).appendChild(top);
top.setAttribute("id","text"+ count);
document.getElementById("text" + count).innerHTML = topText;
}
#memeSection{
position:relative;
}
#memeSection > img{
height:60vh;
margin:5vh;
}
#memeSection > h1{
position:absolute;
top:5px;
color:white;
top: 10px;
left:5px;
}
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Meme</title>
</head>
<container>
<body>
<div class="text-center">
<h1>Meme Generator</h1>
</div>
<div class="text-center">
<form action="#" id="memeInput">
<div>
<label for="image">Image Link</label>
<input type="url" id="imageLink">
</div>
<div>
<label for="topText">Text at Top</label>
<input type="topText" id="topText">
</div>
<div>
<label for="bottomText">Text at Bottom</label>
<input type="bottomText" id="bottomText">
</div>
<input type="submit" value="Make Meme">
</form>
</div>
<div id="memeSection" class="col-12 col-lg-6">
</div>
</body>
<script src="script.js"></script>
</container>
</html>
After Inspecting your Code, I ended up with that the Text at Top is appended as you wanted but it is not shown because of your Styling and if you want to add a text onto a image this is not the way it is done,
Read This Question At StackOverflow it has detailed information on how you can add text to a image
Or
Checkout this tutorial On YouTube which Will for sure help you to achieve your Goal

How do I get to the current picture source of a slideshow?

Completely new to coding over here. Learning the basics.
How can I get to "the picture only", when clicking on a current picture of a slideshow?
Normally in html I would just put this around it:
Current picture
But in this version I just don't seem to get it.
Clicking on the small pictures makes them appear as the big centred one.
Clicking on the big picture currently only pauses/continues the slideshow.
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4){
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1){
counter=4;
}
$("#image"+counter).click();
})
$("#bigImage").click(function(){
paused=!paused;
})
Picture of how it looks is on my post about it.
Thank you!
Full code
<html>
<head>
<title> FWP - Gallery </title>
<script src="jquery-3.1.1.min.js"></script>
<link rel="stylesheet"
type="text/css"
href="bootstrap.css">
<link rel="stylesheet"
type="text/css"
href="mystyles.css">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Gruppo">
<link rel="stylesheet"
type="text/css"
href="https://fonts.googleapis.com/css?family=Syncopate">
</head>
<body>
<div class="container">
<h1>Image Gallery</h1>
<div class="row">
<div class="col-md-3 thin_border">
<img id="image1"
class="crop-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image2"
class="crop-img"
src="after.jpg"
alt="after prisma">
</div>
<div class="col-md-3 thin_border">
<img id="image3"
class="crop-img"
src="sleepy.jpg"
alt="Sleepy cat">
</div>
<div class="col-md-3 thin_border">
<img id="image4"
class="crop-img"
src="Cute.jpg"
alt="Cute cat">
</div>
</div>
<div class="row">
<div class="col-md-1 thin_border">
<button id="backward"><</button>
</div>
<div class="col-md-10 thin_border">
<img id="bigImage"
class="big-img"
src="before.jpg"
alt="before prisma">
</div>
<div class="col-md-1 thin_border">
<button id="forward">></button>
</div>
</div>
</div>
<script>
var paused=false;
setInterval(function(){
if(!paused){
$("#forward").click();
}
}, 3000);
$("#bigImage").click(function(){
paused=!paused;
});
$(".crop-img").click(function(){
$("#bigImage").attr("src",
$(this).attr("src"));
});
var counter=1;
$("#image"+counter).click();
$("#forward").click(function(){
counter = counter + 1;
if (counter>4) {
counter=1;
}
$("#image"+counter).click();
})
$("#backward").click(function(){
counter=counter-1;
if (counter<1) {
counter=4;
}
$("#image"+counter).click();
})
</script>
</body>
</html>
The section of javascript isn't vanilla javascript, it is a sample of this 'jquery' that you may have heard of in your quest to learn a bit of coding.
Jquery is syntactic sugar for javascript. $ is your cue to key in that this might be jquery (there are other js libraries that use $ syntax but I think jquery is the most prevalent).
$(".crop-img")
$("#bigImage")
$("#image"+counter)
This is jquery code to select an element from the page, the '.' is for selecting class, the '#' is for selecting id, there are tons of others you can look up as well. This gets you a jquery object that you can then save to a variable, call a method on, etc.
$(".crop-img").click(someFunctionNameHere);
$("#image"+counter).click();
These are examples of functions being called on the jquery objects, which happen to be event functions. The first is assigning a function to the click event of the selected element(s) (all elements with class 'crop-img'), the second is firing the click event of the selected element (the element with id='imageX' with 'X' being the current value of counter).
Also instead of a function name, you can just inline the function instead:
$("#bigImage").click(function(){
paused=!paused;
})
This assigns the unnamed inline function for the click event of the element with id='bigImage', which is where you want to pull up the image. Put your code in there that will bring up the image, it will run when the big image is clicked.
Such as if you want to actually go to the image, as in your html example, put this line in there:
window.location.href = "someHrefHere";
If you want to know the the src of the current bigImage, you can grab it with jquery:
var myhref = $("#bigImage").attr("src");
You can put it together from there.
Happy Coding!
You can retrieve the src of the current image when you click on the big image like this:
$( ".row div:nth-child("+counter+") img" ).attr('src')
counter was setted as index of your current image and this should be inside of your $("#bigImage") click function.

Bootstrap Carousel Thumbnail Border not auto updating.

When the carousel goes to the next slide the border on the thumbnails should move to the next thumbnail to correspond with that image change. They do not. I discovered this error when adding a closing div to .carousel-inner that wasnt there it was causing my carousel to collapse after the last slide. Here is the code.
HTML
<div class="carousel-inner">
<div class="active item" data-slide-number="0">
<img src="img/100325-01.jpg" class="img-responsive" alt="Regional Open Space Comparison" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit:<br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
<div class="item" data-slide-number="1">
<img lazy-src="img/100325-02.jpg" class="img-responsive" alt="Ecological Analysis" />
<div class="carousel-caption"><p></p>
<div class="photo-credit"><p>Photo Credit: <br />Media: Please submit high-resolution image requests to</p>
</div>
</div>
</div>
</div>
CSS
.carousel-selector > .active, .selected img {
border: solid 2px #003C30;
}
JS
$('#myCarousel').carousel({
interval: 13000
});
// handles the carousel thumbnails
$('.carousel-selector').click(function () {
var selectorIdx = $(this).closest('li').index();
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
});
Here's how you'd do it by index rather than all that string parsing.
$('.carousel-selector').click(function () {
$('#myCarousel').find('.carousel-selector').removeClass('selected');
var selectorIdx = $(this).addClass('selected').closest('li').index();
$('#myCarousel').find('.item').removeClass('selected')
.eq(selectorIdx).addClass('selected');
$('#myCarousel').carousel(selectorIdx);
});
Demo
Note that 1) I've added classes to each control element, and 2) I've removed the previous/next controls because they were overlapping the individual controls.
Here's a fun chained version:
$('#myCarousel')
.carousel(selectorIdx)
.find('.carousel-selector').removeClass('selected')
.eq(selectorIdx).addClass('selected')
.end()
.find('.item').removeClass('selected')
.eq(selectorIdx).addClass('active');
Demo 2

How to make a slideshow in javascript

Im trying to make a slideshow with these images:
Whenever I try this, it gets stuck on first image.
<div id="slideshow">
<img class="show" src="../images/food/chicken_quesa.jpg" alt="Chicken Quesadilla" title="Chicken Quesadilla">
<img src="../images/food/steak.jpg" alt="Beef Tenderloin" title="Beef Tenderloin">
<img src="../images/food/pasta_display.jpg" alt="Pasta Station" title="Pasta Station">
<img src="../images/food/salmon.jpg" alt="Salmon Filet" title="Salmon Filet">
<img src="../images/food/panacotta.jpg" alt="Panacotta" title="Panacotta">
<img src="../images/food/beet_salad.jpg" alt="Beet Salad" title="Beet Salad">
<img src="../images/food/tuna.jpg" alt="Seared Tuna" title="Seared Tuna">
<img src="../images/food/foi_gras.jpg" alt="Foi Gras" title="Foi Gras">
</div>
Im not sure what part of the code is messing up, but here it is.
Javascript:
<script type="text/javascript">
var hovering = false;
var slideshow = $("#slideshow");
slideshow.mouseenter(function() {
hovering = true;
}).mouseleave(function() {
hovering = false;
slideShow();
});
function slideShow() {
if (!hovering) {
var currentImg = (slideshow.children("img:visible").length) ? slideshow.children("img:visible") : slideshow.children("img:first");
var nextImg = (currentImg.next().length) ? currentImg.next() : slideshow.children("img:first");
currentImg.delay(1000).fadeOut(500, function() {
nextImg.fadeIn(500, function() {
setTimeout(slideShow, 1000);
});
});
}
}
$(document).ready(function() {
slideShow();
});
</script>
Use cycle.js
http://jquery.malsup.com/cycle/
$('#slideshow').cycle();
<html>
<head>
<!-- You can load the jQuery library from the Google Content Network.
Probably better than from your own server. -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<!-- Load the CloudCarousel JavaScript file -->
<script type="text/JavaScript" src="cloud-carousel.1.0.5.js"></script>
<script>
$(document).ready(function(){
// This initialises carousels on the container elements specified, in this case, carousel1.
$("#carousel1").CloudCarousel(
{
xPos: 128,
yPos: 32,
buttonLeft: $("#left-but"),
buttonRight: $("#right-but"),
altBox: $("#alt-text"),
titleBox: $("#title-text")
}
);
});
</script>
</head>
<body>
<!-- This is the container for the carousel. -->
<div id = "carousel1" style="width:1000px; height:700px;background:#000;overflow:scroll;">
<!-- All images with class of "cloudcarousel" will be turned into carousel items -->
<!-- You can place links around these images -->
<img class = "cloudcarousel" src="images/Chrysanthemum.jpg" alt="Flag 1 Description" title="Flag 1 Title" />
<img class = "cloudcarousel" src="images/Desert.jpg" alt="Flag 2 Description" title="Flag 2 Title" />
<img class = "cloudcarousel" src="images/Hydrangeas.jpg" alt="Flag 3 Description" title="Flag 3 Title" />
<img class = "cloudcarousel" src="images/Koala.jpg" alt="Flag 4 Description" title="Flag 4 Title" />
</div>
<!-- Define left and right buttons. -->
<input id="left-but" type="button" value="Left" />
<input id="right-but" type="button" value="Right" />
<!-- Define elements to accept the alt and title text from the images. -->
<p id="title-text"></p>
<p id="alt-text"></p>
</body>
</html>
There are many fancy light weight image slideshow plugins available in Jquery.
Check
http://wowslider.com/rq/jquery-images-slider/
http://www.dreamcss.com/2009/04/create-beautiful-jquery-sliders.html

Categories

Resources