Improve company productivity with a Business Account.Sign Up

x
?
Solved

Show only a select part of a image in a photo gallery like 100x100

Posted on 2011-03-13
12
Medium Priority
?
446 Views
Last Modified: 2012-05-11
I notice on some sites, that when you look at their photo gallery, their pictures only show a selective part of the image like 100x100 but when you view the image it show the complete image, Making the photo gallery nice and clean. How do I do this with ColdFusion or do I need something else?
0
Comment
Question by:overcolor
  • 5
  • 4
  • 2
  • +1
12 Comments
 
LVL 4

Expert Comment

by:dwkd
ID: 35125111
you could use cfImage action=resize to create thumbnails 100x100 that link to the main img
http://livedocs.adobe.com/coldfusion/8/htmldocs/help.html?content=Tags_i_02.html
you need coldfusion 8 or better since the cfimage was added in CF8
0
 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35125120
There are 2 steps for it

1. While storing your images, store it as a) original image and b) thumbnail 100 X 100.

2. Use lightbox to get the desired effect of when the thumbnail is clicked it shows you the complete image.

for 1st use CFIMAGE TAG, in the height and width section put 100, this will create a thumbnail of 100 X 100, remember you would like to keep the aspect ratio of the image, otherwise it will not look good

<cfimage 
    [b]required[/b] 
    action = "resize" 
    height = "number of pixels|percent%" 
    source = "absolute pathname|pathname relative to the web root|URL|#cfimage variable#" 
    width = "number of pixels|percent%" 
    [b]optional [/b]
    destination = "absolute pathname|pathname relative to the web root" 
    isBase64 = "yes|no" 
    name = "cfimage variable" 
    overwrite = "yes|no"> 

Open in new window


For 2, use LIGHTBOX, there are lot of free ones available, here is a link http://www.huddletogether.com/projects/lightbox2/, very easy to configure by just adding a "rel" attribute to your < a href and including some JS. Instructions are available on the link above.

0
 
LVL 4

Expert Comment

by:dwkd
ID: 35125136
if you would like to show some part of the image without resizing it and shrinking it then there's a simple way to do that and that is the CSS background property .. you can set the image as a background and move the background around with background position to focus on the part of the image you want to show....and then just set the container that has this background to 100width and 100 height

..all of that of course can be repeated with a cfloop or query of some sort :) and not write 100 lines of html
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
LVL 11

Expert Comment

by:Brijesh Chauhan
ID: 35125145
If you are using a version before 8, then you can download the CFC project from

http://www.opensourcecf.com/imagecfc/

well to be frank it use this on CF8 as well as it performs better for me than the inbuilt cfimage tag.
0
 

Author Comment

by:overcolor
ID: 35144604
@dwkd: can you give me an example of what you are talking about....Please
0
 
LVL 16

Expert Comment

by:Gurpreet Singh Randhawa
ID: 35147057
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35149357
i'm guessing you mean the background example
here is an example of the same image but arranged differently to highlight a specific part of the image

<style type="text/css">

    .vman {
		background:url('http://idmilano.com/blog/wp-content/photos/vitruvian_man.jpg');
		border:2px solid #333;
		width:100px;
		height:100px;
	}
	.head { 		
		background-position:-150px -50px;		
		
	}
	
	.hands { 
		background-position:-250px -50px;		
	}
	
	.feet { 
		background-position:-150px -300px;		
	}
		
</style>

Head: <div class="vman head"></div>
Hands: <div class="vman hands"></div>
Feet: <div class="vman feet"></div>

Open in new window

0
 

Author Comment

by:overcolor
ID: 35151246
@dwkd

This works great!!
One last thing, how can I make this a link if I wanted to?
0
 
LVL 4

Accepted Solution

by:
dwkd earned 2000 total points
ID: 35151348
this is one way.. probably your best bet without javascript
<style type="text/css">

    .vman {
		background:url('http://idmilano.com/blog/wp-content/photos/vitruvian_man.jpg');
		border:2px solid #333;
		width:100px;
		height:100px;
		display:inline-block;
	}
	.head { 		
		background-position:-150px -50px;		
		
	}
	
	.hands { 
		background-position:-250px -50px;		
	}
	
	.feet { 
		background-position:-150px -300px;		
	}
		
</style>

Head: <a href="#" class="vman head"></a>
Hands: <a href="#" class="vman hands"></a>
Feet: <a href="#" class="vman feet"></a>

Open in new window

0
 

Author Comment

by:overcolor
ID: 35151429
dwkd

Perfect, I have been wanting to do this forever
0
 

Author Closing Comment

by:overcolor
ID: 35151433
Thank you
0
 
LVL 4

Expert Comment

by:dwkd
ID: 35151479
like @myselfrandhawa was saying, combining this with thickbox makes it even cooler
0

Featured Post

Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This is a how to build your own CSS3 slideshow and when I say CSS3 I mean just CSS with no javascript in sight! There a few examples online of how to do this but most just show you an example without any explanation, others make it more complicat…
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …

607 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