Top level gallery in specific CSS element on portfolio page

Ariaan · 2016-06-30 19:01:34

I'm happily playing with Backlight and custom CSS to create a website to my liking. I took lofty's excellent idea for a portfolio page with parallel scrolling and adapted it for horizontal scrolling (I hope he doesn't mind…). Someone told me horizontal scrolling is counter-intuitive, but I'm hoping visitors will understand what they have to do.

Now I think it would also be nice to have the regular gallery overview at the back of the scrolling area. I created a rudimentary area for it. Perhaps it is redundant, but it might be handy to have it there anyway. I copied the html and CSS code from the regular galleries page and inserted it into my portfolio page. I'm seeing an issue with the top margin/padding, but that will probably work itself out later on.
But what I'm hoping, is to find a way to have the top level gallery connected to that specific CSS element directly from Backlight, so any update to my galleries will automatically show on the site. Is there a way to do that, perhaps via custom PHP?

The page is located here: http://ariaanblok.nl/demo/portfolio

fwillette · 2016-06-30 20:17:52

Dag Ariaan

I find your portfolio really fantastic. I easily found the slider to scroll across the page. Would even be greater if the mouse's wheel could be the job, no idea if it is possible.
I think that for this kind of display horizontal scrolling is the best option.

Fredy

Ariaan · 2016-06-30 20:54:01

Dank je, Fredy! I tried automatic scrolling via a button, but the movement is not sufficiently fluid, so I prefer manual scrolling. Horizontal scrolling doesn't work with my mouse either. It's probably something you have to configure on your system, I don't think it is web controllable.

gwlco · 2016-06-30 22:48:09

I like that, BUT it is not intuitive where to 'scroll from'.. Perhaps someone has the answer.

Ariaan · 2016-06-30 23:04:53

Thanks gwico! In the Dutch text I've written that you should scroll to the right, but maybe it would be best to add "Scroll ->" with a fancy arrow in a conspicuous place. And you're right, at first glance the page seems complete, with no need for scrolling. That might be an issue.

lofty · 2016-06-30 23:26:27

Hi Ariaan,

I like the sideways scroll, I have also been experimenting with smooth scrolling and I have found a Javascript that allows you to select how fast the scroll is, targeting and 'id' on the same page. Perhaps you could use that to get the effect you need?

http://njp.kopstone.co.uk

I have cut out a few of the scrolling sections for this test, but the code you need for the smooth scroll is below:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 2000, function(){
   
        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
    } // End if
  });
});

Ariaan · 2016-07-01 01:05:42

Hi Jon,

Thanks for that! I've been avoiding Javascript up to now, but this might work better than the CSS animation I tried. I see it works excellently on your page (the arrow buttons, I assume?). I might look into this to get the visitor quickly to the back section with the complete gallery, or perhaps to create a menu to transport them to the individual categories. I've not worked with Javascript up to now, still getting familiar with CSS, but it's very interesting!

By the way, I very much like the simple elegance of you site.

lofty · 2016-07-01 02:43:53

Thanks Adriaan,

I like to try and keep things simple, a bit like me

BTW you may want have a look at how the scroll looks on a mobile device like an iPad. The Scroll does not behave like it does on a PC/Mac. The pictures can show up really big and don't display well at all. I have to use some media calls to display the images properly and I have not worked out how to do that yet. So for the moment I hide the Scrolling panels on mobile till I've cracked the code. PS I Like the curly header!

This is all new to me as well, I'm just cribbing code from elsewhere until I understand what I am up to......

Ariaan · 2016-07-01 03:49:29

Thanks for the tip, Jon! Unfortunately I don't possess an iPad, so I can't check how things look on a tablet. I'm not even sure it will scroll at all there. My site is definitely not mobile friendly, but that's a worry for later.

The curvy header background was done in Photoshop this morning. I tried to create curvy borders with CSS at first, but that didn't work out the way I wanted, so it was back to good old Photoshop and PNGs. :-)

Ariaan · 2016-07-10 07:10:47

I found that I can move the top level gallery to a desired location by addressing the ".the__albumSet" element in custom CSS. In my case, i was able to move it to the far right of my page by specifying a "left" and "width" value and some margins/padding. So no real need to have it put inside a specific element, although that might make it easier to center the albums.

I also found something else very neat, and perhaps it's good to share it here since others might have similar wishes: you can apply mark-up in the localized fields of the client response gallery in Backlight.
For example, i wanted to have the title for the client gallery login page appear inside a specific container, to be able to use a certain background for the title. That seemed impossible, since the login page seems to be generated on the fly and there's no copy field where you can input your own HTML and create containers like in the regular pages. But fortunately you can write a div in a text field and then manipulate that div in your custom CSS file. So in Client Response > Localizations > Dutch > Manage > TEXT_LOGIN, I inserted <div id="pagename"><h1>Klanten-<br>gedeelte</h1></div> and then specified the #pagename properties in the custom CSS file to give it the proper background and centering.
I could also have just addressed the h1 element in CSS, but in this case, adding the extra div worked better and I'm quite happy that Backlight has this flexibility.

Community @ The Turning Gate

#1 2016-06-30 19:01:34

Top level gallery in specific CSS element on portfolio page

#2 2016-06-30 20:17:52

Re: Top level gallery in specific CSS element on portfolio page

#3 2016-06-30 20:54:01

Re: Top level gallery in specific CSS element on portfolio page

#4 2016-06-30 22:48:09

Re: Top level gallery in specific CSS element on portfolio page

#5 2016-06-30 23:04:53

Re: Top level gallery in specific CSS element on portfolio page

#6 2016-06-30 23:26:27

Re: Top level gallery in specific CSS element on portfolio page

#7 2016-07-01 01:05:42

Re: Top level gallery in specific CSS element on portfolio page

#8 2016-07-01 02:43:53

Re: Top level gallery in specific CSS element on portfolio page

#9 2016-07-01 03:49:29

Re: Top level gallery in specific CSS element on portfolio page

#10 2016-07-10 07:10:47

Re: Top level gallery in specific CSS element on portfolio page

Board footer