Solved

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

Posted on 2011-03-13
12
429 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
 
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 15

Expert Comment

by:Gurpreet Singh Randhawa
ID: 35147057
0
3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Re-position the objects 7 97
How can I do a Select All on this page? 8 36
CSS Question 9 42
Crazy text will not be removed no matter what I try! 13 12
When writing CSS, there are a few simple rules that will make your life easier.    1. Using ‘* {box-sizing:border-box;}’. Using this will wrap all your elements in a nice little compact box-model that will give you the width you want, like so... …
CSS is a visual language used to classify objects and define rules about how they should be displayed. CSS skills aren’t restricted to developers anymore, there is a big benefit to having a basic understanding of the language, regardless of your occ…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
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…

910 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

20 Experts available now in Live!

Get 1:1 Help Now