Solved

thumbnails in content

Posted on 2014-03-10
11
290 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 51

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 51

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 51

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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 

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 51

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 51

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 51

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

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Suggested Solutions

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
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…

707 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

14 Experts available now in Live!

Get 1:1 Help Now