Solved

thumbnails in content

Posted on 2014-03-10
11
301 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 58

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 58

Expert Comment

by:Julian Hansen
ID: 39919632
What am I looking for on that page?
0
Learn how to optimize MySQL for your business need

With the increasing importance of apps & networks in both business & personal interconnections, perfor. has become one of the key metrics of successful communication. This ebook is a hands-on business-case-driven guide to understanding MySQL query parameter tuning & database perf

 

Author Comment

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

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 58

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 58

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 58

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

AWS Certified Solutions Architect - Associate

This course has been developed to provide you with the requisite knowledge to not only pass the AWS CSA certification exam but also gain the hands-on experience required to become a qualified AWS Solutions architect working in a real-world environment.

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
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)

627 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