ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

Click to enlarge photo

Forums: Questions and Answers About Building Your Site
Created on: 04/05/13 07:05 PM Views: 1608 Replies: 11
Friday, April 5, 2013 at 7:05 PM

I have noticed a few sites have images on their homepage can anyone let me know how that's done?

On my home page how do I get a photo to "click on photo to enlarge"?

Reply
Friday, April 5, 2013 at 8:50 PM - Response #1

If you know the websites you are talking about, you can just do the Contact Us from their website and directly ask them. Or when on their website, you can also right-click and choose View Source and see what they are doing.


Reply
Friday, April 5, 2013 at 9:22 PM - Response #2

Hi Craig,

Without seeing an example of what you describe, I concur with Kyle's recommendations. Also, it might be the "Gallery Creator" tab under admin functions. Try it out on a test page on your site and see if it does what you want. Or if you want to view mine, Email me (tab on the left of this window) and I can give you access. Although, not sure you can do photo gallery on home page.

Reply
Edited 04/05/13 9:25 PM
Friday, April 5, 2013 at 10:15 PM - Response #3

Hi Craig,

It is good to 'meet' you.

EDIT ADD: Your first question was how to get photos on your home page... if I read that correctly. In the editor of every page are tools at the top - 3 rows of tools. In the top row right next to the word SOURCE is a picture icon. Click on that to upload your photos. Instructions are found by clicking on FAQS above. You want #7 "How do I upload photos to my home page or other pages of my web site?"

To possibly answer the second question in your post, I added a photo SCHOOL DAYS to the home page of TAP. GO HERE to view it. Is this what you want to do?

Reply
Edited 04/05/13 10:23 PM
Friday, April 5, 2013 at 11:02 PM - Response #4

To have a small photo open to a large photo on any page:

1) Upload the photo to your site by using the picture icon in the edit tools. Insert the photo onto the page. Now make it smaller by clicking on a corner of the photo. (The one on TAP is 189 high by 236 wide.)

2) You need the photo location (address). The easiest way to get the address is to right click on the photo IN the edit window, select Image Properties and copy the URL, then close the Image Properties window.

3) Still in the edit window,

  • click on the photo
  • click on the LINK icon in the 2nd row, 3rd from the right. (A globe with a link in front.)
  • in the window that opens: 1) paste the photo location you copied in as the URL and keep this window open to... 2) at the top of this window, click on TARGET. 3) On the TARGET tab, click on the arrow to see the drop down options and choose "New Window (_blank)".
  • click on OK at the bottom.

4) Click on SAVE CHANGES at the bottom of the edit page.

Be sure your page is active and test it!

Reply
Saturday, April 6, 2013 at 2:04 AM - Response #5

Thanks Gwen! Will definitely have to save this information, this is GREAT!

Reply
Saturday, April 6, 2013 at 2:34 PM - Response #6

The instructions above work well but be aware that pictures stored in the image vault are automatically resized if they are larger than would fit on the page, so the maximum image size is 646 pixels (I think). If your original image is larger than this and you want to display it at maximum size, you will need to store it in the file vault rather than the image vault. Images placed in the file vault are not resized.

To do this, in the editor window, click on the chain link icon in the second row of icons. First, click on the 'Target' tab at the top of the window, and choose "New Window (_blank)" from the drop-down list, then click back on the 'Link Info' tab, click in the Upload a new file field and locate and select the image on your computer, then click on the "Upload" button.

This will place a link to the image in your editor window. You don't want this text to be the link, you want the picture itself to be the link, so you need to modify the code.

Click on the Source button. You'll see the code that looks like this:

Change the code so that it looks like this:

This just requires adding a few characters at the beginning and at the end of the second instance of the image URL.

Click on the source button again to return to the normal editor window.

You should now see the picture in the editor window; it will be at full size so it may not be entirely visible. Click on the picture and drag one of the corners to make the picture the desired size.

After saving your changes, the small picture will be a link to the full size image which opens in a new window.

Reply
Edited 04/06/13 2:52 PM
Saturday, April 6, 2013 at 4:14 PM - Response #7

Marla, No need to save the info... it is in the TAP Forums.

Dick, this particular picture's 'large' size is just fine. Not everyone has large screen monitors - yet. Wink We will remember to search for this thread if the situation allows. Thanks for sharing!

Reply
Saturday, April 6, 2013 at 5:52 PM - Response #8

There are actually many ways to zoom a picture that DO NOT take the focus away from the current page.

One method uses CC's own Gallery code. IOW, it's actually possible to put a Gallery on ANY page you like, from 1 to many images. Look at source mode at any gallery and copy the CSS and 2 scripts shown. Unfortunately, CC editor tends to add a bit of junk when saved, but it works. I can show a simple example later if anyone is interested.

And custom code can also do this - which is what I did.

All these methods automatically detect the screen size and automatically adjust any zoom to the max (if desired).

Reply
Sunday, April 7, 2013 at 12:24 PM - Response #9

Jack, that's pretty cool; thanks for the tip.

Reply
Monday, April 8, 2013 at 1:50 PM - Response #10

Jack,

Well, I looked at the source code for an existing gallery page but can't figure out which CSS and scripts are needed to create the popup window. You offered to show a simple example and I'm interested in finding out how to do this.

Thanks.

Reply
Monday, April 8, 2013 at 2:41 PM - Response #11

Here are 2 basic examples. Look at code between

This is a single image from File Vault (not a gallery), could actually be image from anywhere LINK

These are multiple images (can technically hide the preview by must removing "img" entries). Also from file vault LINK

CC editor really messes with the code here, so it's best to use HTML mode or put in a separate page and use ifrrame. Someday CC needs to fix this error in the editor.

Reply
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.