www.webdeveloper.com
Results 1 to 8 of 8

Thread: Can animated GIF frames be link

Hybrid View

  1. #1
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    Can animated GIF frames be link

    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?

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You should use JavaScript to slide the individual images nested each in their link tags.

  3. #3
    Join Date
    Jul 2007
    Location
    Wisconsin
    Posts
    468
    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.

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    still fumbling

    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.

  5. #5
    Join Date
    Mar 2006
    Location
    Northern UK :((
    Posts
    667
    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.
    99 little bugs in the code, 99 bugs in the code, fix one bug, compile it again ... 101 little bugs in the code

    An important petition, regarding your human rights:
    https://www.change.org/en-GB/petitio...r-both-genders

  6. #6
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    That's so helpful! Thanks.

    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.

  7. #7
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266

    Thanks for feedback

    Changed name to lowercase indexmobile.html (keeping index at the moment)
    Code:
    <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

    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">
    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.

  8. #8
    Join Date
    Mar 2006
    Location
    Northern UK :((
    Posts
    667
    Quote Originally Posted by auntnini View Post
    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.





    Quote Originally Posted by auntnini View Post
    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.
    99 little bugs in the code, 99 bugs in the code, fix one bug, compile it again ... 101 little bugs in the code

    An important petition, regarding your human rights:
    https://www.change.org/en-GB/petitio...r-both-genders

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles