Solved

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

Posted on 2011-03-13
12
438 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
[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
  • 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
Quiz: What Do These Organizations Have In Common?

Hint: Their teams ended up taking quizzes, too.

 
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 500 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

Learn by Doing. Anytime. Anywhere.

Do you like to learn by doing?
Our labs and exercises give you the chance to do just that: Learn by performing actions on real environments.

Hands-on, scenario-based labs give you experience on real environments provided by us so you don't have to worry about breaking anything.

Question has a verified solution.

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

As a result of several questions about how to use Bootstrap I thought it would be a good idea to write down the development aspect of creating a Bootstrapped website in as little time as possible. Part 1 of this article will only concentrate on g…
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?
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

728 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