I'm trying to make a script that zooms into an image. This is the page:
http://vermilionsite.com/phone/?id=1
Click the first option, then choose a colour, then mouseover the image. It uses the original image. How can I make it so that the zoom uses the new coloured image?
The jQuery function you have just adds a div with a background over the image, while the original mouse overlay function that zooms your image moves the 'bg-iphone.png' background around in an overlay, so the logic is somewhat flawed as you would also need another background image with the same color on the original div so a bg-iphone.png modified with the same color. I guess you could modify the script that returns your color overlay to also return a modified image and change the background of the image from bg-iphone.png to a png with the same color as the overlay.
Or you could have three modified pngs with the same colors you need that would change the background image in the select function.
Hope this helps.
use this http://www.userdot.net/files/jquery/jquery.loupe/demo/
Related
I want to change .webp image width or height to a higher value, and add some transparent area to the image.
For example, imagine I have a width:512*height:312 webp image, I need two steps:
1- Add 512*200 transparent area to my image.
2- Transform my image to the center of the new image.
OR
1- Add 512*100 transparent area to the top of my image.
2- Add 512*100 transparent area to the bottom of my image.
The final result I want, a 512*512 .webp image without any scale on my original image.
How can I do this with the PHP language?
Consider using Imagick extension.
I have a user registration form (php) with image upload capability and I would like to know if it's possible to detect if the user-uploaded image has a border. If it has, I would like the form to deny the submission.
PHP, JQuery or Javascript may do. Thank you so much!
You can write a PHP-GD script to check if the given image contains border. You can implement following steps to check for one-pixel border with same color:
Get height (h) and width (w) of the image
First scan horizontally, loop through (0,0) to (w,0) check if all pixels have same color
Then scan vertically, loop through (0,0) to (0,h) check if all pixels have same color
If pixels have same color, we can assume the picture has border. If we find complete one-pixel border using above steps, we can run it again on inner pixels to be sure.
See this question.
There is on internet. Such script that, "jumps" before an another image.
So... for example, if I found an image, and I click on "Save as..." I get a 1x1 pixel image in place of the one I wanted to safe.
For example of it is
http://www.youtube.com/watch?v=9bZkp7q19f0
Next to views counter (1'167'974'545) there is an animation. But if I try to copy link or save it, it "push" into my hands useless picture. This script could be very useful on my website. How to do it?
As far as I can see from the code of the youtube page they use the following lines as the html elemnt for that image:
<img class="watch-dancing-psy" src="//s.ytimg.com/yts/img/pixel-vfl3z5WfW.gif">
So normally the image referred to in the src attribute is the 1x1 pixel image.
They use CSS to put the real image like this (when defining the CSS class watch-dancing-psy):
background-image: url(https://s.ytimg.com/yts/img/logo_dancing_psy-vflsJl9hC.gif);
In case of your example URL img src is a 1x1px transparent gif and the "actual" image and its dimensions are defined in CSS as background, width and height properties.
I have a div with overflow:hidden which contains image (.draggable()) that is usually larger then the div and I need to get only visible part of the image and send it to server side script and save as new file. So my question is, how to get only that visible part?
Thanks!
The solution is by getting the x,y position of the draggable. You can get that data by using .top() and .left() on your div. Then you should send the whole image to your server with the top, left, width, height data and crop it on your server-side.
Please note that I think that it would be possible to crop it to the Client side by using a Canvas HTML5 element and some tricky javascript.
You have two options, depending on the method that your are moving your image in the div, save the parameters in inputs using javascript and pass them using POST method when submitting.
For example you pass the TOP and LEFT of image and you already know the WIDTH and HEIGHT of div, so if the left is -375px, you know that you should crop the image from 375px to (375px + div's WIDTH) and same goes for top.
Better option is to use this nice jQuery plugin:
http://deepliquid.com/content/Jcrop.html
You should look at the absolute top and left values of the image and compare it with same top and left of the div, take the differences along with the div width and send all this data to server side where you can crop the image via some other programs /library.
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them