Can animated GIF frames be link

[auntnini]

Please see http://www.josephdenaro.com/indexMobile.html

Tying an animated GIF for MOBILE DEVICE instead of JavaScript image array with links, but cannot figure out how to create links for individual images/frames.

Added meta and media queries, should there be anything else? Are there major flaws or errors?

[Kor]

You should use JavaScript to slide the individual images nested each in their link tags.

[OctoberWind]

First, From a "design" standpoint, I really like the site. I think it fits the "artistic" content very well.

From a "development" standpoint, I agree with Kor, and JavaScript should have no problem handling the display/linking of images for a mobile device (similar to how you're doing it already). There are a plethora of sliders, carousels, cyclers that can be used. As a fallback, just make sure you have a <noscript> set with a single image.

There is no way to link individual "slides" of an animated gif.

A couple of suggestions:

Find (or manually set) the height of "div#space", to the tallest image on the page, so the bottom of the page doesn't jump around as your hovering over multiple images.

Your "cell phone" site has an issue with the 'Black and White' page; redirects to /bw/mobileIndex.html [404 - page not found] on my iPhone. I'm not seeing that on my iPad, but I do get a different background image on the top nav buttons.

[auntnini]

Thanks for the input.

I'm doing a "Romney" (flip/flop). One day it seems Mobile Devices / cell phones do NOT support JavaScript, next day it seems "most DO support Java'Script" so I'm confused.

Download / bandwidth of pages has to be reduced. Have not figured out if animated GIF or JavaScript would be best on that score.

Put in <noscript>go to index.Mobile.html</noscript>.

Also added a JavaScript from CSS Tricks that automatically switches small-screen devices to Mobile version.

Images are not quite the same aspect ratio. Currently using % min- max-WIDTH and have not calculated the HEIGHT factor (yes, it is bad when page jumps).

In the middle of figuring out what to do with inner-category pages. Wonder if just floating images on page with onclick to something like jQuery FancyBox would work for both JavaScript and non-JavaScript devices.

[wh666-666]

Although you have had your question pretty much answered, would additional feedback help?

I browsed your site on a samsung galaxy. One thing is your m in mobile is capitalised, but the settings on my phone wants to keep everything in lower case.

The left hand side of the page is fine, but on the right, the blue border clings to the edge of the page. Even after resizing.

The page isnt automatically sized to my device, which I prefer. On a mobile when you zoom in, scrolling is a no-no.


I do like your image though and the low file size as well as the site itself which is friendly for the most part to phones.

[auntnini]

At this moment, I'm searching for "image size" and "slideshows" for cell phones. But I'll be coming back to absorb your helpful comments. CONFESSION: I don't have a cell phone and rely on Dreamweaver "Preview in Device Central" so your real-time feedback is soooOOO very helpful.

Search results for IMAGE SIZE: one post said 128x160px, cellphoneforums.net said 176x220, digitalCamerman said iPhone display 640x960px @ 326ppi [?] square image 540px.

I was just looking at galleria.ioand wondered if anyone had tried that. It seems to be tied to FLIKR but that seems optional, and

Phone, iPad & touch support
Galleria supports swipe movements and uses hardware optimized animations for ultra-smooth image browsing on mobile and touch devices.

[auntnini]

Changed name to lowercase indexmobile.html (keeping index at the moment)

<script type="text/javascript">   <!--
if (screen.width <= 699) {
document.location = "indexmobile.html";
}
//-->   </script>

The left hand side of the page is fine, but on the right, the blue border clings to the edge of the page. Even after resizing.

The page isn't automatically sized to my device, which I prefer. On a mobile when you zoom in, scrolling is a no-no.

Don't understand about "blue border" problem. Regarding sizing and scrolling, should this

<meta name="viewport" content="width=device-width, user-scalable=yes">
or 
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

be changed to something like (from https://developer.mozilla.org/en/mob...wport_meta_tag)

A typical mobile-optimized site contains something like the following

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

The width property controls the size of the viewport. It can be set to a specific number of pixels like width=600 or to the special value device-width value which is the width of the screen in CSS pixels at a scale of 100%. (There are corresponding height and device-height values, which may be useful for pages with elements that change size or position based on the viewport height.)

The initial-scale property controls the zoom level when the page is first loaded. The maximum-scale, minimum-scale, and user-scalable properties control how users are allowed to zoom the page in or out.

[wh666-666]

CONFESSION: I don't have a cell phone and rely on Dreamweaver "Preview in Device Central" so your real-time feedback is soooOOO very helpful.

Ahhh yes, sometimes the preview pages arent too accurate.

Don't understand about "blue border" problem. Regarding sizing and scrolling, should this

[code]<meta name="viewport" content="width=device-width, user-scalable=yes">
or
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

This is the homepage for me:




This is then the other pages which are fine:




Except for this bit:



I dont know if adding and alignment parameter or reducing the initial scaling might help. I havent had chance to look at the source code properly yet.

It might be worth making a copy so you dont mess anything up and experimenting a little.