Solved

thumbnails in content

Posted on 2014-03-10
11
298 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 57

Expert Comment

by:Julian Hansen
ID: 39919632
What am I looking for on that page?
0
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 

Author Comment

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

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 57

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 57

Assisted Solution

by:Julian Hansen
Julian Hansen earned 500 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 57

Accepted Solution

by:
Julian Hansen earned 500 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

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!

Question has a verified solution.

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

FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

752 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