www.webdeveloper.com
Results 1 to 10 of 10

Thread: Where to start to create image gallery?

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

    Where to start to create image gallery?

    Forgive me for not being prepared and for fumbling. Hoping for some direction quidance or just what to search for (tried "mobile device image galleries").

    I'm not aiming to design FOR mobile devices, but just trying to get regular Web site image galleries to be fluid enough to view on small mobile-device view port (see http://www.josephdenaro.com/bw/index.html -- just using CSS percentages).

    "Nice article" (http://coding.smashingmagazine.com/2...ve-web-design/) was helpful and one covering PHOTOSWIPE http://www.netmagazine.com/tutorials...mobile-website. Is PhotoSwipe the way to go?

    I've read that JavaScript is not supported on some mobile devices. How true or what percentage is that? Are basic JavaScript event handlers such as onMouseOver or onClick automatically [she hopes] translated into a swipe or press gesture?

    When the above BW page (which uses onMouseOver) was viewed in Adobe Mobile Device, clicking the thumbnails displayed large images.
    Last edited by auntnini; 04-03-2012 at 04:44 PM.

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You can just modify the cmouse click event handler to swap the full size image and get the same result as the mouseover. So basically the onMouseOver and onClick could be handled by the same function that way your page should behave the same for pointing devices and finger gestures.

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

    thanks

    Quote Originally Posted by holyhttp View Post
    modify the cmouse click event handler to swap the full size image
    Thanks for your response. But I have no idea how to do that. Can you point me to some instructions and/or what phrase to search for?

    My next (or maybe should have been first) question is: "how does one code for mobile device "gestures" and navigation? How about keyboard codes?

  4. #4
    Join Date
    Sep 2006
    Location
    new york
    Posts
    266
    By "cmouse," do you mean mouse cursor? If so, would that be onClick event handler?

  5. #5
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    There is no cmouse click event. The c is just a typo. So that would be the onClick event handler.

  6. #6
    Join Date
    Mar 2012
    Posts
    1,639
    Quote Originally Posted by auntnini View Post
    I'm not aiming to design FOR mobile devices, but just trying to get regular Web site image galleries to be fluid enough to view on small mobile-device view port>...
    You have a fundamental problem: load times for large pictures. You cannot scale puctures in HTML or CSS, and JavaScript will be hopelessly inefficient. What you need is a server that dynamically scales the pictures before sending them down the line. That can be done in PHP, but it is a server-side issue not a client-side one.

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

    Yeah, you are right!

    Testing on Dreamweaver's Mobile Device simulator looked OK. But when tested on a real cell phone it was a disaster -- just as you pointed out.

    FREE DotEasy hosting for the sites does not include server-side scripting so no PHP.

    Thought I'd give CSS3 media queries another go.

    Trying to envision how to display multiple images. Even the simplest click slideshow with an array calls for JavaScript. Any suggestions, article sources, examples, etc. would be greatly appreciated.

  8. #8
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    You can indeed use PHP includes on the server:
    require_once('path to your file');
    If you need to display images on mobile devices, you will have to create smaller versions of those images specifically for smartphones. For instance thumbnails of about 80x80px and full size images of around 600px width.

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

    still stumped

    http://www.doteasy.com/ DotEasy has an "Unlimited Hosting" plan at $3.98/month that includes "Unlimited MySQL and PHP," but the sites referenced are using FREE hosting that does not offer any server-side PHP.

    The images at http://www.josephdenaro.com are about 200x300px. Want to show about 12 images per page. Maybe use an animated GIF on home page. Without JavaScript on cell phones, trying to figure if images stacked vertically (or horizontally?) could be navigated with a gesture or swipe? And how would one code for that? Is keyboard navigation on regular web page translated into swipe gesture?

    Any leads to resources and demos (what to search for?) would be great.

  10. #10
    Join Date
    Mar 2012
    Posts
    1,639
    Quote Originally Posted by auntnini View Post
    Want to show about 12 images per page. Maybe use an animated GIF on home page. Without JavaScript on cell phones, trying to figure if images stacked vertically (or horizontally?) could be navigated with a gesture or swipe? And how would one code for that? Is keyboard navigation on regular web page translated into swipe gesture?
    I just assume that smartphones support HTML v4 and CSS v2, (and animated GIFs), and I code for that. I have found that new sites can be made "mobile friendly", by automatically adjusting for screen widths between 320px and 960px just using CSS float and clear.

    If smartphones do not support at least that then, as far as I am concerned, they are not fit for purpose

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