Expiring Today—Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2011-03-13
12
Medium Priority
?
440 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

CHALLENGE LAB: Troubleshooting Connectivity Issues

Goal: Fix the connectivity issue in the lab's AWS environment so that you can SSH into the provided EC2 instance.  

Question has a verified solution.

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

Sometimes databases have MILLIONS of records and we need a way to quickly query that table to return the results me need. Sure you could use CFQUERY but it takes too long when there are millions of records. That is why SOLR was invented. Please …
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

719 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