SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    LONDON,UK
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    displaying pictures - easy question

    Please help - very easy question - client wants a display of pictures on one webpage: fine - can resize them and put them all in a table ...BUT then when the web user clicks on one of the pictures - client wants it to display on screen in a larger size.

    How can i do this ? I'm using Dreamweaver but do I need to use Javascript or something ?

    Many thanks

  2. #2
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

  3. #3
    SitePoint Wizard bronze trophy Black Max's Avatar
    Join Date
    Apr 2007
    Posts
    4,029
    Mentioned
    12 Post(s)
    Tagged
    0 Thread(s)
    Good compendium of demos, Eric. Checked out the examples. You know the most interesting people....

  4. #4
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    LONDON,UK
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks but eek! those examples a bit too complex for me!
    can anyone pls explain it in a more basic way ?

    Plus what exactly is lightbox ?!

    Many thanks!

  5. #5
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Lightboxes are those annoying JavaScript contraptions that seem to have replaced popup windows: http://en.wikipedia.org/wiki/Lightbox_%28JavaScript%29 where usally they grey-out the rest of the screen and highlight a frame-less boxlike structure or pseudo control.

    Now if you were just wanting to see a larger image you could provide a link to a larger image file using the normal method of a hyperlink and thus opening the file. Though I doubt your client wanted that they were probably expecting something similar to the solutions above.

    You may want to search for other examples of how to create the above if you didn't follow those exact samples they were probably slightly biased choices and possibly a little brief but on the plus side they did have working examples.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    The simple js example above is about as easy as it gets. This is pretty easy too. :hover instead of click though. http://www.visibilityinherit.com/cod...e2-example.php

  7. #7
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by xhtmlcoder View Post
    ... Now if you were just wanting to see a larger image you could provide a link to a larger image file using the normal method of a hyperlink and thus opening the file. ...
    This is what I thought when I first read the request.

    Just make the image a hyperlink, linking to the fullsize image. Have the link open in a new window/tab, and you'll be fine.

    Something like:
    Code HTML4Strict:
    <a href="larger image" target="_blank"><img src="thumbnail"></a>

  8. #8
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by ferrari_chris View Post
    Just make the image a hyperlink, linking to the fullsize image. Have the link open in a new window/tab, and you'll be fine.

    Something like:
    Code HTML4Strict:
    <a href="larger image" target="_blank"><img src="thumbnail"></a>
    NO! Don't spawn new links, especially not for a photo gallery. Just open the link in the same window, like every other link. If God* had intended links to be opened in new windows, he would have made that the default action.

    Popup links should only ever be used in exceptional circumstances. A photo gallery is not an exceptional circumstance. Popup links are confusing and irritating, particularly with the advent of tabbed browsing, where they too often open a new window rather than a new tab. Any vaguely competent web surfer can choose to open a normal link in a new window/tab if they want to, but only a small proportion of the Enlightened One Percent will be able to open a "target=_blank" link in the current window if they want to (after having found out the hard way that it's a popup link, of course).

    * In the context of the Internet, that is of course Sir TBL.
    ie Opera users

  9. #9
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    Eric, I recently wrote an article for Six Revisions where I produced a 100&#37; semantic CSS lightbox (using target like you did, with less bulky code) that doesn't require any JavaScript (except for snotty ole IE). Here's the demo I built: http://downloads.sixrevisions.com/cs...ox/source.html Who needs jQuery!

  10. #10
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stevie D View Post
    NO! Don't spawn new links, especially not for a photo gallery. Just open the link in the same window, like every other link. If God* had intended links to be opened in new windows, he would have made that the default action.

    Popup links should only ever be used in exceptional circumstances. A photo gallery is not an exceptional circumstance. Popup links are confusing and irritating, particularly with the advent of tabbed browsing, where they too often open a new window rather than a new tab. Any vaguely competent web surfer can choose to open a normal link in a new window/tab if they want to, but only a small proportion of the Enlightened One Percent will be able to open a "target=_blank" link in the current window if they want to (after having found out the hard way that it's a popup link, of course).

    * In the context of the Internet, that is of course Sir TBL.
    ie Opera users
    You make it sound like it's a matter of life and death.

  11. #11
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    For a disabled user... it can pretty much be like that. Popup windows where the end user has no say in the matter not only violates the end user's ability to access information effectively, it's highly intrusive and damaging to the end users experience (and often results in people not returning to your website).

  12. #12
    SitePoint Enthusiast
    Join Date
    Oct 2008
    Location
    LONDON,UK
    Posts
    64
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks guys so far but all that is a bit beyond me at the moment - I've decided to put all my thumbnails in a table (am using Dreamweaver) the PROBLEM is this:

    here is the code I've got so far and it does work, that is, it places "bigger.jpg" into the table when the mouse is clicked on "smaller.jpg"

    <a href="#" onmouseout="MM_swapImgRestore()" onClick="MM_swapImage('Image2','','index.php_files/bigger.jpg',1)"><img src="index.php_files/smaller.jpg" name="Image2" width="133" height="100" border="0" id="Image2" /></a>


    BUT what I really want is for "bigger.jpg" to be displayed on screen in a bigger size obviously (when "smaller.jpg" is clicked)- any ideas on how to do this ?

    many thanks !

    newhere

  13. #13
    SitePoint Evangelist ferrari_chris's Avatar
    Join Date
    Mar 2008
    Location
    NP, New Zealand
    Posts
    576
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Do you want the bigger image to replace the smaller image, or appear somewhere else?


Bookmarks

Posting Permissions

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