It’s been awhile since I’ve been here as I’ve been working three part-time jobs. Now I’m down to one job… whew! So I’m back to refining my website that several of you help me with a few months ago. http://www.moskovita-photography.com/
I like the way it’s setup when you scroll outside the main photo at the top where it’s blurry, it shows the full size photo. BUT, I find it confuses a lot of people that visit the site. I found that out as some friends & clients told me such as this one:
Jason Kravitz May 1 • 8:28pm
I can empathize with having an old site that could use a make-over. Your images are stunning. I feel like this site doesn’t fully do them justice. The UI control is not intuitive to me and a bit frustrating. Like it starts with Mountains and Lakes but as soon as I roll the mouse down it seems to change the whole gallery when I hover over another tab so that I’m not sure where I am. If I try to roll off that control to see the thumbnails, it just shows a large version of the image and then I have to roll back into the grid but may or may not accidentally switch the category again. I’d consider using a more familiar user pattern like clickable menus vs roll-over and maybe rethink the whole click to the large image that is under the UI. It’s kind of cool and different but also may cause people to leave your site if they can’t figure it out.
So what I want is the main photo at the top to stay the same size and the blurred part also to stay the same filling the screen without it becoming full size photo when I scroll off the photo to the side. I like the way that looks anyways. So how do I change that in my coding? It’s been a few months so I forgot where it was in coding. Since that former post was closed, I couldn’t ask the question there: https://www.sitepoint.com/community/t/methods-for-displaying-gallery-images-with-titles/354087/90
So what I want is the main photo at the top to stay the same size
The same size as what? I assume you are talking about the image in the white lined box at the top. i don’t understand what you are asking for. The image fits the box as best it can without losing its aspect ratio. We discussed this in your original thread and you didn’t want to cover the whole area because it would crop your photo. I feel though you may be asking a different question altogether.
Or are you simply asking that you want the background image to remain blurred at all times and for the gallery not to disappear when you scroll to the side?
I agree with some of the comments by Jason which is why on the original demo I coded for you there were some instructions visible.
I also notice that you changed the body background to ‘contain’ which is going to leave white gaps at the side or top depending on aspect ratio.
The hover gallery effect is basically the same one that you originally had (which I believed was borrowed from Stu Nichols old site). Hover galleries are quite hard to use and a click version would be more accessible but once again would require quite a bit of updating to achieve.
It would also be a benefit if smaller thumbnail images were used and the large image loaded when necessary otherwise the page becomes quite sluggish. These were issues mentioned in the other thread.
Let me know what needs changing and I will try to help.
The code I mentioned to remove in post #3 will stop the gallery disappearing when you hover at the edges of the viewport. Remove that code and see if it was what you wanted.
If you are asking that the smaller photo fits the width and height of the bordered box fully then we talked at length about this in your other thread.
It is physically impossible to stretch an image to fit without breaking its aspect ratio or without cropping one dimension or another. This is not a limitation of html but pure physics in the real world. You can’t stretch real images without stretching both height and width uniformly.
The ‘cover’ value makes the image cover the area but width or height will be cropped in order to make the image fill the box.
The ‘contain’ value on the other hand ensures that the whole image is visible in the box at all time which will result in a gap at either horizontal or vertical edges depending on aspect ratio.
The only other option would be for the box to be fluid also and adjust size with the image. This of course would cause the page to jump up and down and any hover navigation impossible.
If you look at the following image of yours you will see black gaps at the side of the bordered box.
The black gaps are caused by the aspect ratio of the image and the value contain in the css which leaves a gap at the edge.
If we change the value to cover as seen in this screenshot the image will fill the box (look at the devtools window to see the code has been changed to cover for .mast img)
Ah… once again you guys give me a lot to look at and to do.
I’m going to look this over later and play with some of the coding.
I don’t mind the way it is at all, I love it, but need it more simple for other people looking at it as most are probably not computer savvy anyway. Most like simple and if it’s not, they look elsewhere.
Yep, that was what I was asking for… now to see what people think.
Myself I liked it the way it was, but I had too many complain about the scrolling, disappearing gallery etc. My best friend who is a superior photographer than me, was one of them who complained and I take great stock in what he said. He did say once he figured it out he liked it fine, BUT most other checking out the site might just leave instead of figuring it out.
Looks like there is nothing I can do about the black background around some photos.
I’m going back there to read what you said about it again. Some photos with the black borders was already there, but disappeared after scrolling to the left or right.
Oh well…
Another question… I thought I had this solved before, but maybe not. How do I get my gallery to stay put when someone clicks on it? As it is now, if they move the mouse over another gallery, they lose the one they were in. I’d like it when I clicked on a gallery it stayed put until I “click” or select another gallery.
That was in essence the purpose that you chose this gallery as it was cleverly designed (by Stu Nichols I believe) so that you can hover the tabs and get a preview of the images without needing js etc.
To remove that function you would need to first change the js from mouseover to click.
I have been gone too long. I tried what you suggested above,
To remove that function you would need to first change the js from mouseover to click.
then… Then you would need to remove ‘some’ of the css hover rules and just use the active class instead.
The main rules are contained here.
That didn’t work, then tired the codepen you saved, that didn’t work either, so I tired the source in code pen in results, that obviously didn’t work either. Spent two hours on this today… I’ll start over and try again tomorrow.
No that is working fine unless you meant something else?
Does that not do what you want?
If that’s what you want then In your actual page you need to remove these styles.
/*
.photo ul.topic:hover li.active ul {
display: none;
}
.photo ul.topic:hover li.active:hover ul {
display: block;
}
.photo ul.topic li:hover ul {
display: block;
border-color: #999;
z-index: 10;
}
*/
Which are still the same as my old codepen and as shown above.
Then just change mouseover and put click in its place as shown here:
topTabs[j].addEventListener("click", function(e)
I copied your whole current site into a new codepen and made those changes and it worked straight away.
That is your actual page code.
So either I’m not understanding what you want or you made a mistake somewhere. It’s only a couple of seconds work to implement.
If you still can’t get it to work then don’t spend hours on it because you are obviously doing something wrong. Just copy the changes you made and post here or keep the changes on the live site so I can inspect and see where you went wrong.
Hi @jackmoskovita. FYI, the HTML validator shows a few unbalanced (“stray”) tags. For the sake of cross-browser consistency, it should be assumed that stray tags can affect the way the page renders in different browsers. These are easy to spot and fix
I made a mistake saving to the wrong website for testing, had another similar one and forgot which one… DUH!
But you made it much easier for me Paul with that new CodePen… that fixed it. Exactly what I wanted.
The few changes I made reflect on feedback I got from friends and clients, what they liked and didn’t like. Also will keep people looking instead of being frustrated and looking elsewhere.
And ronpat, I will fix those problems, thanks for the feedback!
This site is the greatest!
Now to implement these changes to the other four galleries.
