Solved

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

Posted on 2011-03-13
12
426 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
Comment Utility
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
Comment Utility
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
Comment Utility
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
 
LVL 11

Expert Comment

by:Brijesh Chauhan
Comment Utility
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
Comment Utility
@dwkd: can you give me an example of what you are talking about....Please
0
 
LVL 15

Expert Comment

by:myselfrandhawa
Comment Utility
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 4

Expert Comment

by:dwkd
Comment Utility
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
Comment Utility
@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
Comment Utility
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
Comment Utility
dwkd

Perfect, I have been wanting to do this forever
0
 

Author Closing Comment

by:overcolor
Comment Utility
Thank you
0
 
LVL 4

Expert Comment

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

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

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…
Recently while working on a project I got a very annoying cfdocument has no body error message. I had never seen this error before. So I checked the code. The code was pretty simple; it was Just showing me the cfdocumnt tag and inside that tag a …
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

771 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

10 Experts available now in Live!

Get 1:1 Help Now