TTG Horizon is an elegant, paginated, horizontal-scrolling gallery, and now available for purchase. It’s the template currently being used on my own portfolio site, www.MatthewCampagna.com. The gallery optionally includes Javascript for floating-mouse scrolling through the images; with this disabled, however, the gallery instead uses the traditional scroll-bar and is Javascript-free.
As an added bonus, I have found that the gallery works rather well on an iPhone.
A fully functional demo version is available for download, though it supports only ten images per gallery.
{ 12 comments… read them below or add one }
Two questions: (1) where do I go to download TTG Horizon? (2) Does it support AutoIndex?
See the HTML Galleries menu at the top of the page, access the page for TTG Horizon. And yes, TTG Auto Index will detect it.
Cheers,
Matt
Thank you. And great photos on the demo page, by the way.
Hi Matt
That’s really a great gallery! I’m just missing one thing: how can I put a horizontal format picture CENTERED between two vertical formats? They’re all at the bottom, which doesn’t look very good.
Thanks,
Andi
You need to adjust the image height so that all of your images are of the same height. To wit, use your horizontal height as the height for the entire gallery, and your verticals will size down to match.
This looks like a very tempting gallery and has some very nice features…
A question and a comment.
In the Image Info module, there are options for Title and Captions. The Title appears when you hover over the image, but I don’t see it elsewhere, nor do I see the Caption anywhere? Can these be made to appear in the image frame or something that moves with the image?
Similarly, there is a Film Strip Nav module. I can’t find a film strip. Are these both vestiges of other galleries?
Comment/request(s): I wonder whether the java script could be made to work in a click and drag mode.
Also whether it would be possible to have an option so that the images would naturally snap to a central position.
One approach would be the user clicks on the left or right side of the image and it scrolls to the next picture.
Related is a wish for being able to set the Identity plate a fixed number of pixels from an edge, rather than a %.
I am looking to have a page that looks static and simple, but allows the user to flick the main image from one image to another. Pretty much like on the iPhone… For the film strip approach you are using on your very nice site, the user can easily move it along by hovering appropriately. And that’s very nice. But I am trying to get the focus on just one image without much distraction from other images.
Just a suggestion. Thanks.
Hi Tom,
The Title gets used for the image ‘alt’ information in the code, which can affect search engine results for your pages and images. The Caption doesn’t actually get used right now; I should have removed it, but forgot to do so. Sorry for the confusion.
The “Filmstrip Nav” refers to the horizontal row of images as the ‘filmstrip’, and the ‘nav’ is the large Previous/Next buttons that appear at the beginning and end of the filmstrip, respectively, when your gallery spans multiple pages. These options allow you to change the appearance of these items.
Regarding the click/drag functionality, it sounds like you’re looking for a gallery that would in some ways mimic the Autoviewer behavior. I haven’t seen anything like that, but would certainly consider it if I did. Creating it from scratch is a little over my head right now.
Regarding the positioning of the identity plate, there is a way around it. Enable the “Fix Header Width” option located in the Site Info pane > Header / Page Settings. This will constrain the width of the header to a fixed size in pixels. Adjusted the header by percentage will then equate to a percentage of that fixed width, and will therefore also be a fixed value independent of browser width. 10% of 1000px, for example, is 100px.
I hope you find these answers satisfactory.
Cheers,
Matt
Matt
Thanks for the reply!
Thinking about this some more after I posted, I concluded I should have de-emphasized the click/drag functionality idea. Although that might be useful, I realizede how implementation would be a new significant effort.
The other idea may be easier as it is a simple? augmentation of the present Java and would go a long way to meet what I am aiming it.
This is an option to have the scrolling stop at the center of the next image and pause for an optional number of seconds (including infinity) while the cursor hovers at one side of the image frame. This would help users who just want to look at one image at a time.
Controlling where an image stops with the present approach takes a bit more concentration than some people give and they might get frustrated.
Combined with a couple of other simple? additional options it would meet my dreams. These are to allow for the Caption in the individual image bottom frame. And to allow for defining an image cell size so that verticals and horizontals would fill exactly the same space.
With those things, I could create a really nice page with one image at a time showing up in the image frame– and the user able to have imageschange in a nice scrolling way by hovering on one side or the other of the frame.
Ah… one more thing. Need to be able to control the width of the Menu bar, just like Header. Now if you use different colors for content and web background, and fix the width of the header, the menu bar stick out to infinity (almost) on the sides.
I had figured out the approach you mention for calculating a % to set the Identity content, but it rounds off to integers and so it is not precisely the same as Identity plates on other pages set by pixel — and the identity plate jumps on a page transition.
Hope I am not being too fussy — just trying to help you make this perfect (for me, and maybe others).
Tom
@Tom Nash
If I had a trophy to give for longest consecutive comments, Tom …
I’m lately enjoying JQuery scripts, so I will look around and see if I can come up with a better alternative for the Javascript scrolling. Not sure something exactly like what you’re asking for exists, though.
Have you looked at maybe setting up Autoviewer with TTG Stage as an alternative? I think that would give you most of the behavior you’re asking for.
The header issue with the fixed width is a bug I’ve only recently discovered. It’s fixed in my development build of TTG Highslide Gallery, and will be fixed in the next update for Horizon as well.
The problem with using pixels instead of percentages for the identity plate is that it then becomes nearly impossible to center the thing, which is a more common use, I think. If you’re using templates with the same header settings, though, the identity plate shouldn’t be jumping. I can only assume you’re using pages with different headers? Which templates are you trying to put together? They will eventually all be moved over to the new header type, but I haven’t quite gotten there yet.
Great product, again
.
Have played with the gallery and have come up with one question that I could not resolve.
On you own demo/live site you get all the 1,2,3… page numbers directly below the border or within the bottom border.
I can’t get the numbers down there at all, now they are at the bottom (almost) and a large gap between the bottom border of pictures and the page numbers exist (see at http://prphoto.se/px/portfolio what I meen).
What have you done and is there any switch/slide or value that I have not seen?
Cheers, Peter
@Peter Remnemark
Now, see, you’ve gone and done something I hadn’t thought of. I should have, but I didn’t. I try to anticipate everything a user might do and then account for it in the design, but users never fail to surprise me.
The lower navigation menu utilizes the same styling settings used by your upper navigation menu. You have the menu padding-top set large to accommodate your identity plate, and that large padding is also being applied to the lower navigation menu. That’s something I will need to fix in an update; I’ll have to give the lower navigation menu its own set of controls.
In the meantime, the fix is likely going to be to put your identity plate into the header, not the menu (see Identity Plate controls). Design-wise, I think it should still be able to accomplish the same look; just set the header background and menu background both to black. You will need to adjust your header height, but I think that should be all you have to do.
Cheers,
Matt
Matt, thanks for the “simple” solution. What I did actually was to design the page after one of your templates (dark city) so it will match my other. In HS template you did put the logo into the menu
.
Some times it is not good to be lazy as me, to copy/paste from one to the another
, but this time I did learn something and it was ‘quit-easy’ to fix it.
Cheers, Peter