Images won't enlarge or pop out on my site

[micahtwilliams]

Hi,

I'm a fairly new user of Highslide and I love it...very clean, simple, and elegant design.

I am recently engaged, and built a Tumblr blog (http://micahandmeghan.com/picturesofus) for my fiance and I that will allow visitors to look at photos, check registries, and RSVP. I have a custom domain name, but my site is not hosted by GoDaddy (who I bought the domain from). I have worked for many hours trying to figure out a work-around to host these files, and finally figured out how to do it through DropBox (if anyone needs help on this, let me know)

I finally got the presentation to look right, but the images won't enlarge or pop out on the site. I click on an image and it just says "loading" and, well, they don't ever load.

What am missing here? Thanks for your help!

Micah

[RoadRash]

Hi Micah,

YouÔÇÖve done everything correct, but this happens because you are using Dropbox as file host. The problem is the path/url for hs.graphicsDir inside the highslide.config.js file.

Code: Select all

hs.graphicsDir = 'http://db.tt/5WvtgwZ'; 

The url is correct; it shows the files in the graphics folder when I copy & paste it in the browsers address field. But Highslide will use this path/url programmatically in the script to f.ex build the full url to the graphic outline file. In your case it will be http://db.tt/5WvtgwZ/grahics/outlines/custom.png. This url gives 404 Not Found and thats the reason why it just says Loading when you tries to open your images.
Bottom line: You canÔÇÖt use Dropbox for the files in the graphics/outlines folders.

The good news is that you can use http://www.fileave.com as file host for the files in these folders. Keep the rest of your files @ Dropbox (it easier, faster and you have more space available) but use fileave.com for the graphics/outlines folder. Create an account, create a highslide folder, create a graphics folder inside the highslide folder and upload the graphics files and create an outlines folder inside the graphics folder. Upload the outlines files inside the outlines folder. Use the path to the graphics folder for hs.graphicsDir in highslide.config.js. It should look something like this:

Code: Select all

hs.graphicsDir = 'http://your-username.fileave.com/highslide/graphics/';

[micahtwilliams]

Thank you so much! It is working and looks amazing!

There is, however, one small glitch---the buttons don't show up (forward, back, play, englarge), although the link is there if you drag your mouse pointer over it.

What happened to these buttons?

Thanks again for your help!

Micah

[RoadRash]

You need to correct all the paths for the graphic files in the highslide.css files since you are storing the files in different places.
Ex:

Code: Select all

.highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url([hilight]graphics/loader.white.gif[/hilight]);
}

Change it to:

Code: Select all

.highslide-loading {
	color: black;
	border: 1px solid black;
	background-color: white;
	background-image: url([hilight]http://micahtwilliams.fileave.com/highslide/graphics/loader.white.gif[/hilight]);
}