Advertisement
If you have a new account but are having problems posting or verifying your account, please email us on hello@boards.ie for help. Thanks :)
Hello all! Please ensure that you are posting a new thread or question in the appropriate forum. The Feedback forum is overwhelmed with questions that are having to be moved elsewhere. If you need help to verify your account contact hello@boards.ie

Enlarge image from webpage

Options
  • 30-03-2008 12:29pm
    #1
    sticker
    Registered Users Posts: 3,056 ✭✭✭


    Hi all,

    Just a quick question...

    Is there much involved to add the image enlarge feature this website uses to open bigger versions in a flash window? It's using a rollover effect. I'm just not sure if it's a dreamweaver tweak or flash tweak!

    http://www.iegdesign.com/index.php?action=menu&id=98

    Thanks in advance!


Comments

  • Options
    #2
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    Is done with javascript and if I am not mistaken the source code for that can be found here:

    http://youngpup.net/projects/transMenus


  • Options
    #3
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    louie wrote: »
    Is done with javascript and if I am not mistaken the source code for that can be found here:

    http://youngpup.net/projects/transMenus

    Many thanks Louie! much appreciated...


  • Options
    #4
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    Frtom what I can see this is just Java for a transparent menu system...
    I was looking for a rollover effect where a tumbnail shows a larger version of itelf in a seperate window as in the example I posted above.


  • Options
    #5
    louie
    Closed Accounts Posts: 1,200 ✭✭✭louie


    If you look at the source code for that page you can see that is javascript and you can also see the path for it:

    http://www.iegdesign.com/js/filesearchhover.js


  • Options
    #6
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    louie wrote: »
    If you look at the source code for that page you can see that is javascript and you can also see the path for it:

    http://www.iegdesign.com/js/filesearchhover.js

    Sorry to be a bother, but how do I use this javascript? Do I just paste the code with dreamweaver? I've pasted Java before, but I don't know how to use this code in regard to specific pics! Do I create a thumbnail and an origional image? etc etc!


  • Advertisement
  • Options
    #7
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    disregard - wrong forum post


  • Options
    #8
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    -


  • Options
    #9
    nikimere
    Registered Users Posts: 467 ✭✭nikimere


    sticker wrote: »
    Sorry to be a bother, but how do I use this javascript? Do I just paste the code with dreamweaver? I've pasted Java before, but I don't know how to use this code in regard to specific pics! Do I create a thumbnail and an origional image? etc etc!
    Yes you will need 2 files. 1 thumbnail and 1 large size.
    If your looking for a nice way of displaying your larger image look at this:
    http://www.lokeshdhakar.com/projects/lightbox2/
    All the instructions are on that page.


  • Options
    #10
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    nikimere wrote: »
    Yes you will need 2 files. 1 thumbnail and 1 large size.
    If your looking for a nice way of displaying your larger image look at this:
    http://www.lokeshdhakar.com/projects/lightbox2/
    All the instructions are on that page.

    Many thanks!


  • Options
    #11
    chat2joe
    Closed Accounts Posts: 238 ✭✭chat2joe


    Or a modification of the lightbox 2 code - lytebox

    Has a few added features such as a slideshow and will pop out of iframes. You can use it to display html too - contact form and the likes.

    Just integrated it into a mig php gallery today actually! - photo gallery.


  • Advertisement
  • Options
    #12
    CuLT
    Subscribers Posts: 9,716 ✭✭✭CuLT


    chat2joe wrote: »
    mig php gallery

    Whoa, no auto thumbnail generation, how retro :)


  • Options
    #13
    chat2joe
    Closed Accounts Posts: 238 ✭✭chat2joe


    no auto thumbnail generation, how retro

    Well if you let it use ImageMagick it will! Prefer to keep it old school though! :cool:


  • Options
    #14
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    nikimere wrote: »
    Yes you will need 2 files. 1 thumbnail and 1 large size.
    If your looking for a nice way of displaying your larger image look at this:
    http://www.lokeshdhakar.com/projects/lightbox2/
    All the instructions are on that page.

    Sorry to drag this out, but I'm having difficulty with this still...

    The support forums on Lightbox2 site are for more advanced applications of the css...

    That said, I don't have a lot of CSS experience, is this the correct place for the script code?

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>

    <body>
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    <p>TEST</p>
    <p>  </p>
    </body>
    </html>

    I've downloaded the lightbox2 files - dumped the contents of the folders into the root directory of the site (css/images/js)

    By the by the css file is appearing as a .txt file - ?!

    Anyway I've also added the line of code for the image - see above "<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>"

    The preview in firefox simply shows a hotlink "image #1" which loads the larger image at the bottom of the page - not as it should...

    Am I missing anything with the css files that come with the appliation? do I just dump them into the root directory?

    Any ideas? - I'd love the get this figured!


  • Options
    #15
    chat2joe
    Closed Accounts Posts: 238 ✭✭chat2joe


    loads the larger image at the bottom of the page
    That happens when the css doesn't load.

    You don't seem to referenced the css file at all - you're meant to include this line...

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    (or move the contents into your site's css and change the href to direct to that)


  • Options
    #16
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    chat2joe wrote: »
    That happens when the css doesn't load.

    You don't seem to referenced the css file at all - you're meant to include this line...

    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    (or move the contents into your site's css and change the href to direct to that)

    Where do I place that line of code?


  • Options
    #17
    chat2joe
    Closed Accounts Posts: 238 ✭✭chat2joe


    Within the <head></head> tags.

    This should do it...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>

    <body>
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    <p>TEST</p>
    <p>  </p>
    </body>
    </html>


  • Options
    #18
    sticker
    Registered Users Posts: 3,056 ✭✭✭sticker


    chat2joe wrote: »
    Within the <head></head> tags.

    This should do it...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
    <html xmlns="http://www.w3.org/1999/xhtml"&gt;
    <head>
    <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
    <script type="text/javascript" src="js/prototype.js"></script>
    <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
    <script type="text/javascript" src="js/lightbox.js"></script>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    </head>

    <body>
    <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
    <p>TEST</p>
    <p>  </p>
    </body>
    </html>

    Thanks Joe!


Advertisement