Solved

thumbnails in content

Posted on 2014-03-10
11
292 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 53

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 53

Expert Comment

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

Author Comment

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

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
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 

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 53

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 53

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 53

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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
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…
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

863 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now