- Status
Hi Louie, Thanks for your quick response. You are right this is usually done by using JavaScript but now people is starting to use CSS to achieve the same effect. Basically from a thumbnail image I want to try to pop up a bigger image whe you pass over when mouse on. Please visit the following link to see what I am talking about. CSS ~ Image Pop UP Thanks a mil. Paolo
Did you have a look into the CSS file for that page?
Is loading the image in the browser and only shows when you mouse-over.
That will be grand on one image per page but what about 10 or more loaded in the browser for no reason. That could slow down your website big time. Better make use of Ajax like the lightbox code.
Is loading the image in the browser and only shows when you mouse-over.
That will be grand on one image per page but what about 10 or more loaded in the browser for no reason. That could slow down your website big time. Better make use of Ajax like the lightbox code.
That has exactly the same down-size I mentioned above with more style added to it.
take a look into this:
Lightbox JS
take a look into this:
Lightbox JS
Hi Louie, That actually works better for me, with the CSS because the bigger image covers several thumbnails at the same time you don't get to see all the pictures. The big picture covers 6 thumbnails at the same time. The reason why I didn't use JS before is because I don't know much about it. I am testing with one thumbnail and one image and they are both the same size, but the original two pics have different height and width. Do you know what line contains the info for height and width for the bigger image? Thanks in advance, Paolo
Lightbox is very easy to implement into your website.
download, ftp it to your website then include the js file in the <head>...</head> tag and add the rel="" tag to any images that you want to use like this:
download, ftp it to your website then include the js file in the <head>...</head> tag and add the rel="" tag to any images that you want to use like this:
Code:
<!--add the js script-->
<script type="text/javascript" src="lightbox.js"></script>
<!-- add the rel="" tag to your image-->
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>Now..........
It's just a personal web for a friend. They wanted to show some family and friends their baby scan pictures.
Untitled Document
Thanks for your help.
It's just a personal web for a friend. They wanted to show some family and friends their baby scan pictures.
Untitled Document
Thanks for your help.
- Status