[PHP+JavaScript(?)] pid's and images and confusion

Discussion in 'Web Design & Coding' started by n0d3, May 6, 2005.

  1. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    I've been working on this band's website and the guys in the band want to display their merchandise online. I want it to be like professional clothing sites and shopping sites are, where you have a thumbnail of the image and then when you click on it the image is enlarged in a popup window and there may be some swatches that have color options or alternate views. An example would be like this or this . I'm really having trouble figuring out how that works. If anyone knows where a tutorial is or if you just want to give me some code I'd appreciate it a ton. I don't care what kind of script it is. Obviously I'm mostly considering php and jsp. Thanks.
     
  2. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
  3. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    yep the popup and code swatches could be done with Javascript, course you could just use a target="_blank" and then each of the swatch colours would simply reload the page with a different coloured shirt.

    best thing is implement both in my opinion. while javascript is supposed to be a standard its also client side which poses a problem for debugging and general usability. For example clients can turn javascript off, then of course no two browsers really do javascript in the same way.
     
  4. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    @Geffy: If your using target="_blank", then you need a valid http:// link in the href="" tag and to put the javascript into the onclick event. However, when I've tried this, newer browsers kill the javascript because it looks like a popup. My solution was to put href="javascript:window.open()", but this means you couldn't implement it at the same time as using target="_blank". The only time I've found this to be an issue is when I want to control the properties of the window I'm opening, eg to size the window to match the thumbnail. Do you know of a way round this?

    @n0d3: If you don't mind what size the window you open is, your probably better using target="_blank" for compatibilty as Geffy says. The advantage to the javascript however is that it does let you set the options for the window your opening, although with slightly reduced compatibilty.
     
  5. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    If you have a proper browser like Firefox it will let the user decide if they want JavaScript to resize a window. Plus, i have always found that developers use to small sizes for the text size i use at times to view a site, so i end up having to make it bigger anyways.

    Personally, i am turned away from any site that abuses JavaScript, and or pops up windows with more information. Just link me straight to it, and let me use my back button to go back, that is what it was designed for anyways.
     
  6. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    That's true, X... but having everything load into the main page wouldn't work as well because the format isn't right for that type of thing (in my opinion).. I'll see what I can throw together.
     
  7. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    so i went with the window.open route. the real problem i'm having though is knowing how those id's are stored. like if i want a separate id for each product's popup where do i store them? then how do i get the popup to autoload the info about that particular item? do i have to make a specific page for every product and then define that page by an id?
     
  8. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    nobody? dang
     
  9. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    please? someone?
     
  10. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    if you're storing the info in mysql just have a prod_id field that is autoincrement, then read that value back each time...

    or hardcode id's by allowing whoever to specify the product id in the backend.
     
  11. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
    uhhh... that must have been cockney... because i have no idea what you just said.. sample code perhaps?
     
  12. LordOfLA

    LordOfLA Godlike!

    Messages:
    7,027
    Location:
    Maidenhead, Berkshire, UK
    I don't do cockney I'm a brummie :p

    your best bet is the mysql and php manuals at the respective websites.

    unless you want a basic ecommerce app in the forums :p
     
  13. n0d3

    n0d3 the 4um stalker

    Messages:
    124
    Location:
    my parent's house
  14. Nick

    Nick OSNN Lurker

    Messages:
    147
    Location:
    North West, UK
    @X-Istence: Unfortunately, not everyone who vies the sites I'm involved with has a "proper" browser, otherwise designing sites would be much easier! (Out of choice I use one of the MOOX builds of Firefox) The reason for the sized popups here is a very specific one. When loading an image in a popup you don't usually need a full browser with loads of toolbars, statusbars, scroll bars etc. Text size isn't a problem here either as it's just an image that's showing.

    @N0d3: I think what your asking for is how to pass the image ID from one document to another. The simplest way to do this would be to do something like:
    Code:
    window.open("fullImage.php?imageId=<?php echo $image[id]; ?>")
    
    then on fullImage.php you can use:
    Code:
    $imageId = $_GET[imageId];
    
    to get the id of the image that was clicked. This is a very brief example, you can find more expansive tutorials on the net, but I don't have time to write one now! If your still stuck, let me know and I'll dig out a tutorial for you.

    [edit]Just noticed, I've already posted tutorials further up the thread![/edit]