How Do I Add More Without Re-doing My Titles?

[sianne99]

Hello,

I am loving Highslide Editor for its ease of use. Thank you for a great product! And thank you for the attentive support as well.

I used Highslide Editor to create a gallery of my jewelry, 20 pieces to start on my "Shopping" page. I have arranged them, titled them, and given them all their "alt" names as well. Now I would like to add another 20 or more pictures to the same gallery. Here are my 2 questions:

1) How do I add new photos to the gallery (and maybe re-order all of them) without erasing all the custom information I input into the code for my first group of 20 gallery photos? (The alt info and the title info...)

2) How can I arrange the gallery on the page to be in a more balanced format, perhaps like in a table? Two rows of 10+ photos across the webpage is not very attractive to me. I would prefer my thumbnail photos to be arranged in multiple rows of 5 or 6. Is this possible through Highslide to select the number of photos per row on the page?

If you would like to look at my page to see what I mean, please go to http://bethebead.info/shopping.html.

Thank you so much in advance,
Sianne

[RoadRash]

Hi Sianne,

1) You can’t put your existing gallery back into the Editor, so you need to create the new gallery and then do the reordering of all images manually.

2) You can set a fixed width to the highslide-gallery div and then center the div to achieve rows of 5 or 6 thumbnails.
First you need to know the width of one thumbnail + border & margin. (You can use Firebug to find this.) In your case, each thumbnail is 112px (thumbnail+border+margin), so you can use this CSS for the highslide-gallery div if you want rows with 6 thumbnails each:

Code: Select all

.highslide-gallery {
   width: 672px; /* 112 x 6 thumbnails */
   margin: 0 auto; /* center the div */
}

[CustomD]

I'm trying to do the exact same thing... create a gallery that is 6 thumbnails wide. It is now 5. I am using RapidWeaver as well as editing directly through a file management tool on my web host and I can't find where to place the CSS. I know RoadRash said "use this CSS for the highslide-gallery div", but I tried placing the CSS all over the place with no success. By the way, I'm just moving from iWeb to Rapidweaver and have almost zero coding experience, in case it's not blindingly obvious.

Here's the CSS I think I should insert:

Code: Select all

.highslide-gallery {
   width: 678px; /* 113 x 6 thumbnails */
   margin: 0 auto; /* center the div */
}

Here's the page: http://www.thedavidcooper.com/styled/page1.html

(If you read this Hilde, I don't know if you'll remember me asking for help right after you were sick a few weeks back, but when you see the site you'll see that your advice got me a lot farther than I was... I'm almost there! (for that one page at least), and I 100% owe it all to you. I'm still pretty clueless, but some of it is starting to make a little sense. Thanks again for all the help!)

[RoadRash]

Hi,

The calculation of the width of each thumbnail is wrong, and therefore also the width of the highslide-gallery div.
The thumbnail image itself is 111px + 2px border on each side = 2px + 111px + 2px = 115px (not 113px)
So you need to use this CSS:

Code: Select all

.highslide-gallery {
   width: 690px; /* 115 x 6 thumbnails */
   margin: 0 auto; /* center the div */
}

Place it in any of your CSS files, or in the style tag in the head section of your page.

[CustomD]

Success! Thanks.

When I counted the pixels I only added one side of the margin... duh.

Man, there is just no forgiveness when coding! Not good for a creative type such as myself.