I'm working on photo gallery. Using php to read files and pushing it to jquery on client machine to build image gallery. (works good)
I wanted to use php exif function to get thumbnails of images to make preview of photos
I cannot use php function since my hosting disabled exif module.
I found great library php library but i cannot start it to use as i want it to. I just cannot find good manual for this. (ill continue to work on this, because this work on test image)
i dont wont to use crop like functions (jquery or html) for this, since i dont want to download all images right from the start. I want only to load thumbnails and on click this will load the image itself.
Can anyone please help me with this?
Thank a lot!!!!
Alexei
alexela.biz
Did your host disable GD and image functions?
Try this block: http://davidwalsh.name/create-image-thumbnail-php
You'll have to download the image to the browser if you want to tranform it there. So just set the style of the image so the browser displays it as a thumb.
For example if your image is 460 x 460px then you could create a 100x100 px thumb by adding the following style to the img tag.
<img id="my_thumb" src="my/image/source460x460.jpg" style="height: 100px, width: 100px">
I guess your javascript would look something like -
var imageElement = document.getElementById('my_thumb');
Standards based browsers
imageElement.setAttribute('style', "height: 100px, width: 100px");
Dodgy IE browser
imageElement.style.setAttribute('cssText', "height: 100px, width: 100px");
and jquery
$('#my_thumb').attr('style') = "height: 100px, width: 100px";
Related
I am completely confused by why the header image for this webpage here is high resolution, yet when I create it in my HTML is comes out lower resolution. I am linking to the exact same img link. Although when I inspect the code this image has been linked by img data-src, could this affect the quality of the image?
If anybody knows anything around this it would be much appreciated.
The image's address is:
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg
but if you look closely the actual src attribute of the <image> element is to
https://static1.squarespace.com/static/57c0dbb31b631b53bedecc7e/t/57c29deb6a4963efc2c2eced/1472372377741/uxuihero.jpeg?format=2500w
Notice the ?format=2500w at the end - it's a common practice for servers to to be asked to provide the image with a fixed width (this saves network traffic on mobile devices).
Once you add the query parameter to your own code you'll see the same image.
The photo on this page has added background color with transparency. It works as photographic philtres. It is that sample of code:
background-color: rgba(0,0,0,.3);
I'm new to frameworks (used a tiny bit of bootstrap before) and have begun building a site with the materialize framework.
As you can see on that link, there is a Parallax framework, which I would like to use. The trouble is, when I swap my images in, it's cutting off more than I would like. Does anybody know how to solve this?
When I use google dev tools, there is a translate3D attribute, for which I can edit the Y value which does the trick. I guess this is in the materialize.js file line 1154:
$img.css('transform', "translate3D(-50%," + parallax + "px, 0)");
but I can't figure out where the parallax variable is being set.
Try and change the size of the image in <img height="" width="">
. It won't cut that much. Or if you want to increase the size of the parallax image container just use
.parallax-container{
height:
}
PS:
Always use high-res pictures when using parallax.
I am trying to create a page where appropriate images to load are determined by javascript, based on browser size. For example:
<img src="image1.jpg" />
javascript would change it to:
<img src="image1_800px.jpg" />
and load the 800px wide image version.
Doing this is not a problem. Problem arises when i try to do the same for browsers without javascript. The basic idea would be to hide images initially and display them with a style in NOSCRIPT tag. So browsers that support javascript will change image urls and make those images visible and browsers that don't support javascript will simply unhide those images by css. The problem is that images with display:none are loaded by browsers. And adding image url into anything but the src attribute is not an option as such image would rely on javascript to set its src.
So are there any ideas if it's possible to make this work?
For instance: i could rewrite image src attributes on domready and hope that browsers don't manage to start loading images from old src, but would that be the case? If so - would it always be the case or would some browsers work differently?
I think what you're looking for is http://adaptive-images.com/ - it uses Javascript to determine image size, but also has a back-up option if the user does not have Javascript enabled that still provides the resized image (with caveats, read the docs).
I have an HTML page. There is a base64 encoded image in it. I am planning on writing a javascript to increase the size of the image and content on the page. So everything on the page will appear bigger. I am able to increase the font size but not sure about the embedded image.
If you have
<img id="myImage" src="" />
Then you can do it like this:
$('#myImage').attr({
width: 150, // new width
height: 150 // new height
});
Well, you can just adjust the css for that image or the attributes. Use either height or width, just not both so they scale properly.
Jquery:
$("img").css("width","150px");
I may be confused but don't all modern browsers support Ctrl + scroll to zoom?
With images referenced by URL, you can change height and width (either the HTML attributes or CSS styles) and the browser will resize the image. I imagine it will work the same with an embedded image.
This functionality is available in most modern browsers, and as such it is unnecessary to duplicate it using client-side scripts. Consider simply informing the user that most browsers have text size controls built in (so that they may use this tool on other sites as well).
I have a site housing a good deal of image thumbnails (currently ~500) on the homepage. Each image is small, about 200px by 150px (but have different aspect ratios). Also small in file size (each is about 10-20k).
I have two buttons to adjust the visible size of the thumbnails (large:200px height and small:100px height).
I decided to use the jQuery .animate function with 0 seconds for the animation to adjust this and keep the ratio of each image:
$('#small_thumbnails').click(function(){
$('.thumbnail').animate({height: '100'}, 0);
return false;
});
This for some reason is causing browsers to become unresponsive and crashes the page. Is it due to the large number of images? I was going to implement lazyload to cut down on the images on the page but lazyload is no longer supported. I could also just write NEW js to do this but am confused as to why the animate function is not capable.
Here is the dev site that has the issue:
http://selfportraitproject.com/dev/
Any help would be greatly appreciated.
Have you tried to use height: '100px' ? That would be the correct syntax, although i don't know why this would crash the browser.
Also calling .animate with a duration of 0 is the same as just setting the css, so just use .css instead, it will perform a lot better.