Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

thumbnails in content

Posted on 2014-03-10
11
Medium Priority
?
313 Views
Last Modified: 2014-03-12
Is there an easy way to make photos that are in the content area of a website scalable so that when someone clicks or mouses over it, it doubles or triples in size?  The only way I know to do this is to make a photo gallery and I really don't want to create 30+ photo gallery pages.  I use dreamweaver.
0
Comment
Question by:nsitedesigns
  • 6
  • 5
11 Comments
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 39918320
Yes you can - with CSS this is fairly easy.
<!doctype html>
<html>
<head>
<title>Test</title>
<style type="text/css">
.hoverfish {
  position: relative;
  width: 75px;
}
.hoverfish img {
  width: 75px;
}
.hoverfish:hover img {
  width: auto;
  position: absolute;
}
</style>
</head>
<body>
  <div class="hoverfish">
    <img src="images/a3.jpg" />
  </div>
</body>
</html>

Open in new window


Working sample here http://www.marcorpsa.com/ee/t595.html
0
 

Author Comment

by:nsitedesigns
ID: 39918379
Not sure what I did wrong.    Where do I set the size of the larger hover image?

http://nsitedesigns.com/nsitedesigns/lakeshore/2.html
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39919632
What am I looking for on that page?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:nsitedesigns
ID: 39920481
sorry, the image in the right column.  I put the hover command on it.
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 39920618
Ok but that image is at full size - if you want it to get bigger - you need to put a bigger image there.
0
 

Author Comment

by:nsitedesigns
ID: 39920645
That was the part I didn't understand.  Yes, they want the image on the right to get BIGGER.  In my client's opinion it is way too small.  

So, in DW, I need to put in the largest image or do I need to make two images?
In the css, do I type in the large image dimensions in both width declarations or the small ones?
0
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 39920770
Can't see how you would want to make it bigger?

Why not just lightbox it?

You can click on it and it opens up a lightbox with the image. I don't think a hover solution will look that great.

Also the way the page is created - it is not obvious that the image will have a bigger option - it appears as a sidebar image which usually stays put.

You can do two images but that would require a bit more coding - the benefit of two is a slightly faster page load time.
0
 

Author Comment

by:nsitedesigns
ID: 39920825
I know I know I know.  Trust me on this one, I know.  But, my client has an entirely different view of the world.

I have a mac.  I cannot click on image on right in either FF or Safari.  Nothing happens.  Don't even get the "hand" icon.
0
 
LVL 60

Assisted Solution

by:Julian Hansen
Julian Hansen earned 2000 total points
ID: 39921156
Nothing will happen the way is currently marked up because the image is at its full size.

Try putting in a larger image and scaling it down with css. You have given the image a width of 259px - which is the actual size of the image.

So - first some questions

Do you want the default (page load) size of the image to be as big as it is now?
or
Do you want it smaller to grow to the size it is now?

Lets assume a then you need to create a larger version of the image - as big as you want it when you hover over it.

While you are doing that you can do this as a demo.
.hoverfish {
    position: relative;
    width: 259px;
    height: 606px;
}
.hoverfish img {
    width: 259px;
}
.hoverfish:hover img {
    position: absolute;
    width: 323px;
    height: 757px;
    cursor: pointer;
    top: -75px;
    left: -60px;
}

Open in new window

You can also look here http://www.mondaybynoon.com/examples/suckerfish_hoverlightbox/horizontal.html for some more ideas.
0
 

Author Comment

by:nsitedesigns
ID: 39922011
They want the side image to get BIGGER.  I agree with you, there is no indication to visitor that the image would need to get any bigger so this might be all for naught.  The lightbox solution would not fit their needs.  Would I need to make the Bigger image this dimension:

width: 323px;
    height: 757px;

I am not sure where that is coming from in your css.  How did you arrive at that?
0
 
LVL 60

Accepted Solution

by:
Julian Hansen earned 2000 total points
ID: 39922692
That was an illustration - your image is displaying at full size - so you would need to make a bigger one and scale it down. But to illustrate the concept I increased the size of the image width and height by 25% - so it scales the image up - just as a demonstration.

If you create an image 323 x 757 and then use css to scale it ot 259 x 606 then the code will still work.

You can make the image as big as you want - and then just change the metrics above.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

971 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question