Hi there I am developing a mobile site (NOT AN APP) for an iPhone.
This is a really noob question though I have searched and not really found what I am looking for, as I am not sure which exact search terms to use.
On an iPhone when you click an image it shows that image larger on the screen so you can zoom in/out.
I am using generated thumbnails that are a lot smaller than the original image, how do I load in a full resoloution image when a thumbnail is clicked?
again sorry for the noob question, if someone can point me in the right direction, part of the problem is that I have NO experience of mobile websites or iphone functionality, I will keep playing with jquery mobile and see where I get with that.
When you click on the thumbnail, you may redirect the user to an another HTML page where is include the image with a max-width and max-height in %.
In mobile, it's better to have a design in % to adapt the design at all mobiles screen.
<img src="myImage.jpg" alt="myImage" id="myImg" />
And in CSS
#myImg{
max-height:100%;
max-width: 100%;
}
You have others solutions, by using jQuery plugins too : http://fancybox.net/
Related
I'm using lightbox for a website. Would it have faster load times if I use a photoshop resized image for the thumbnail or would it be faster if I used the full resolution image but resized in html? It seems like a basic question but I haven't found the answer online anywhere.
I have a problem that I believe is a quick solution... I simply can't figure it out myself, however, and a quick run through search didn't help me either.
Basically, the only real issue I'm having I'd like to address is the logo (SERVICE FIRST) not shrinking down to fit inside of the width of the site in a mobile form. While the rest of the site responds fairly nicely (as nice as it usually gets) to the responsive web design, the header image doesn't so much as twitch, meaning it runs "off" the edge of the page.
My site is at www.test.servicefirstsvc.com
If you view it on a mobile device, or simply shrink your web broswer window to a phone size, you'll see the problem. Any help? I can paste relevant portions of the responsive CSS if needed.
Just give the img tag a max-width: 100%; via CSS.
You should add a height: auto; as well because of some weird issues with the Safari browser not paying attention to the aspect ratio of the image.
I'm building a website using WordPress. Although the pages are well suited for Mobile site, this particular page is displayed very congested. This is the page from the website website - http://www.cyberfosters.com/anspress/
If you click F12 using Chrome browser on this page and toggle the "Device Mode" you'll see how it appears on a mobile device, I'm going through the CSS files to find out what needs to be changed but I can't seem to find out.
What I want is that the page should appear on a mobile as it does on the website but just scaled down.
I was looking at your html and css and the problem seems to be very simple, your site is not build to small deviced because it uses a mix of width values in PX and %, the design must be set in % to work well on multiple devices without using special pages for mobiles and other for pc this is my recomendation.
Example if you put a 1090px image on a 800px screen resolution it will just not work so what we do is to set image width value to 100% in this case and so on that way the images get auto resized the easy way. Do the same with tables images divs spans etc
On my website, I have a 1300x200 image that I am forcing down to 650x100 using the simple width=650px parameter in the img tag. What happens when a retina Mac/iPhone/iPad user views my site. Will they see the full quality 1300x200 image, or will the quality artificially be reduced by half?
As far as whether or not this is efficient, it's just a 50k PNG. My site is otherwise mostly vectored with text/CSS. You could argue this is more efficient than messing with browser-agent detecting Javascript.
Ok folks, I went about answering it myself, and yes, if you use the width tag to half-size an img in HTML, the retina browser will display the full sized image.
I displayed the 1300x200 image half-sized using width on the top, and the plain 650x100 image on the bottom. Zoomed in using Safari on iOS 6.
I recently decided to tackle adding retina displayed images to some sites, but when I view them on my iPhone5 they appear huge (although crisp which is nice). How should I go about reducing the size of my logo? You can check out my site here
I'm assuming it's some code I need to edit in my wedge.css file. Can anybody point me in the right direction? Also, not sure if it matters, but I'm using Bootstrap.