I've been writing a mini image editor. Upon uploading the to-be-edited image, I draw it into a canvas. One of the editing tools is to add a picture frame, which is taken from several sample images
This is the relating part of my HTML code
<div id="canvas-frame">
<canvas id="edit-canvas" width="500"></canvas>
</div>
<div id="border-tool" class="tab-pane fade">
<div class="border-selection active">
<img src="img/hien/no-border.jpg" id="no-border">
</div>
<div class="border-selection">
<img src="img/hien/border1.png">
</div>
<div class="border-selection">
<img src="img/hien/border2.png">
</div>
</div>
And this is the JavaScript code implementing it
$('#canvas-frame').width($('#edit-canvas').width());
$('#canvas-frame').height($('#edit-canvas').height());
function placeBorder(src){
$('#canvas-frame').css('border-image','url('+src+') 30 round');
$('#canvas-frame').css('border-width','20px');
}
$('#border-tool .border-selection img').click(function(){
$('#border-tool .border-selection.active').removeClass('active');
$(this).parent().addClass('active');
if ($(this).attr('id')=='no-border'){
$('#canvas-frame').css('border','none');
} else{
placeBorder(this.src);
}
});
As you can see, my idea is to use the canvas-frame div to wrap around the canvas, then try changing css of it. But now I encounter another problem, how to implement a Save button to download the canvas with the bordering frame around it. Could you please give me any suggestions or tutorials to do it? Thanks a lot
Related
I am using following theme for one of website (click here). This theme come with one background image and i modified this to multiple background images for 'section' tag <section id="intro" class="intro"></section>
This script doesn't wok properly as it show black screen in between image at time.
codepen example
<!-- Section: intro -->
<section id="intro" class="intro">
<div class="slogan">
<h1><span class="text_color">WELCOME TO SQUAD</span> </h1>
</div>
<div class="page-scroll">
<div class="wow shake" data-wow-delay="0.4s">
<a href="#latest-tabs" class="btn btn-circle">
<i class="fa fa-angle-double-down animated"></i>
</a>
</div>
</div>
</section>
<!-- /Section: intro -->
I am using a trick and showing all these image also in another div with it display property, this way helped to to resolve black screen between image transition as all image are cached if i am not wrong if i dont put these image in a hidden div then each image takes time to download.
<div class="background-images" style="display: none !important;">
<img src="http://bootstraptaste.com/theme/squadfree/img/bg1.jpg" />
<img src="http://feelgrafix.com/data_images/out/12/859698-nature-background.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140402202316338_photo.jpg" />
<img src="http://interest.ge/inter/app/interest/data/uploaded/20140923140344524813450_photo.jpg" />
<img src="http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg" />
</div>
Overall you will notice that it breaks, for some reason it some works well in other browser other than FF.
i need to fix this or need another script which can show slid show for a container div as shown in this example and works well with fadein fadeout effect
It looks like that images are being downloaded via a GET request each time JS switches them. Try to cache them somehow so you can save some time on a get/redirect requests.
I think the black screen is caused by the image source, if you look the image source when black screen occurs, it doesn't show an image, and if you navigate to that source through the browser, it gives you an redirect to a different page.
This issue is caused due to incorrect image source...
For ex. this URL is not redirecting to any image..
"http://feelgrafix.com/data_images/out/15/897490-stunning-nature-background.jpg"
Is there a way that I can change my parallax image when an event is fired? I am using parallax.js and I cannot seem to figure out a way.
Here's the HTML:
<div class="bg-page-index">
img_link_1
</div>
<div class="bg-page-index">
img_link_2
</div>
<div class="bg-page-index">
img_link_3
</div>
<div id="hero">
<div class="product-color-list">
<div class="color"></div>
<div class="color"></div>
<div class="color"></div>
</div>
</div>
JS:
$(".color").click(function() {
var indexNum = $(".product-color-list .color").index(this);
sliderInit(indexNum);
});
var $hero = $("#hero"),
$bg_index = $(".bg-page-index"),
bg_init = $bg_index.eq(indexNum).html();
$hero.parallax({
imageSrc: bg_init,
speed: 0.7
});
This works the first time, but it won't work a second time because the parallax.js library changes things around with the element. Does anyone know a better way of doing this, or how to reinitiate the library?
I found a solution that works. Rather than re-initiate the plugin every time I want to change the background I simply changed the image src within the element this plugin creates:
$('.parallax-slider').attr('src', background);
Trying to figure out how to add a text description to featherlight.js lightbox image gallery. Does anybody know or have any experience?
Here's an example of how the html is laid out:
<div class="mix digital" data-myorder="12" style="display: inline-block;">
<a class="gallery2" href="gallery_images/design/woodcut.jpg">
<div class="thumbnail" style="background-image:url(gallery_images/design/woodcut_th.jpg);"></div></a>
</div>
<div class="mix digital" data-myorder="11" style="display: inline-block;">
<a class="gallery2" href="gallery_images/design/script.jpg">
<div class="thumbnail" style="background-image:url(gallery_images/design/script_th.jpg);"></div></a>
</div>
...plus many more images
I would just like to be able to add a little bit of text as a description of the images in the light box when they open up and I can't find this in the documentation.
If not, does anybody know of a good/light lightbox that could achieve this?
featherlight aims to be light and doesn't have a builtin option for this, but it's easy to do with the afterContent callback.
For example, imagine that your text is in the 'alt' attribute of the a tag, you could specify:
afterContent: function() {
// Add a div for the legend if needed:
this.$legend = this.$legend || $('<div class="legend"/>').insertAfter(this.$content);
// Set the content:
this.$legend.text(this.$currentTarget.attr('alt'));
}
Here's a working example.
I'm trying to mouse over a few images then the images will resize but somehow let's say I have three images. if my mouse is over the first image then all three will resize if I mouse over the third then second then first then it'll resize one by one instead of resizing all three at once. I just started javascript so don't know too much yet.
Is this how it works unless I know more advanced way of doing it?
Also I want to make it so when my mouse is out the images will go back to default but I'm not sure how I should do that....
This is what I have...
<script>
var div1Images=document.getElementById("div1").getElementsByTagName("img");
for(i=0;i<div1Images.length;i++)
{
div1Images[i].onmouseover=function()
{
this.style.width="100px";
}
}
</script>
<body>
<div id="div1">
<img src="cat.jpg" id="im1"/>
<img src="dog.jpg" id="im2"/>
<img src="fish.jpg" id="im3"/>
</div><!--close div1-->
</body>
Thanks in advance.
You can do this with CSS:
<img class="mypic" src="cat.jpg" id="im1"/>
.myPic:hover {
width:100px;
}
I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...