Jump to content


Photo

Simple Gallery Pluggin


  • Please log in to reply
11 replies to this topic

#1 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 04 September 2012 - 06:00 PM

Hello, I redesigned my photography portfolio website a few months back with the following intentions: Images to be as big as possible, to be viewed at a decent size and it to be very user friendly on mobile devices. I came to the conclusion that a scrolling format of images where the images are all the same width was ideal. I could play around with single landscapes, portraits and even have a mixture of 2 or 3 portraits etc. Even though it has been pretty easy to update and encouraged me to showcase a full series of images, I'm now seeing some small downsides to the actual design. 1. I think showing all my images on one long strip has taken away the importance of certain images. Like at an exhibition, you like the space the wall creates around individual images. 2. The images are too overpowering and the size is quite obtrusive to the user. I used to use a platform called indexhibit which had an ok gallery feature. On the cms I could rearrange the order and name images quite easily. I turned to wordpress and pagelines so I could take advantage of the great custom settings in wordpress and the all the plugins. Also, I was finding it difficult to do much page styling in indexhibit as I am not the best with code. What I am now looking to do is make my website a bit more narrow (840px instead of 940px - Which I can do) and also to make my pages into a gallery of images instead of a full page of scrolling images. Please see this screenshot I have designed - http://mrjohnlatham....ges/newsite.png So as you can see the navigation is simple - previous and next buttons on the bottom right and image name and number on the bottom left. My question is can anyone recommend a simple gallery plugin that would be able to achieve this. Even if I have to tweak some of the code all I need is it to work as you see in the screenshot. Any help would be greatly appreciated and so far I have had extremely good help from this community! John

#2 batman

batman

    Bat Learning

  • Members

  • 2027 posts
  • LocationBuenos Aires, Argentina
  • Framework Version:DMS
  • Country: Country Flag

Posted 04 September 2012 - 06:15 PM

Hi I use "NextGEN Gallery" This plugin work fine to me, I believe that you can configure as you like Also you can use features or quickslider to show your images without plugin ;)

#3 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 04 September 2012 - 06:51 PM

I've been browsing various gallery plugins for that achieves the look you're trying to accomplish, but can't find one (this is where I looked: http://www.tripwirem...ery-plugin.html). I'm finding plugins that are either a display of one image or more than one. However, it's not always a great idea to change the plugin code for customization, however (because any changes made can be overwritten by plugin updates). Are you still willing to make these customizations?

#4 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 04 September 2012 - 08:27 PM

Hi, whats quick slider? I'm interested in using the features to create galleries for each page. Would that be a recommended solution? Am I able to customize the navigation of the features images in the way that I am looking for?

#5 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 04 September 2012 - 09:20 PM

Hi Catrina, I have just set up a NextGEN gallery of 3 images to test on an extra page. Before I commit to resizing the website width and all my images, it might be best to play with this to see if we can get it right first. As you will see I have all the elements needed - Image name, next and prev buttons and also the image number. Would you mind helping me style this and move the elements to the right places mostly? http://www.mrjohnlatham.com/places - I'd need the images to be at the size they are, which is the current width, but once I proceed the the main change my images wont be at website width so I'll need to tell the gallery to not resize. - I'll need to get rid of the border. - And to match the screen shot I posted earlier. I may have to somehow hide the text widget at the bottom on gallery pages. Thanks

#6 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 04 September 2012 - 11:37 PM

I have just done some playing around and managed to remove the border myself and style all the text in the different elements via custom css. The main thing I need help with now is how to edit the words... 'Picture 1 of 3' to '01 / 03' '< Back' and 'Next >' to 'Previous / Next' With | inbetween And more importantly, the positions of these elements matching my screenshot if possible... http://www.mrjohnlat...ges/newsite.png Any help is much appreciated!

#7 Danny

Danny

    Is Awesome!

  • Moderators
  • 15269 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 05 September 2012 - 07:16 AM

Hi,

The image navigation is something you will need to contact the Nextgen Gallery support team over, as it is functionality of Nextgen Gallery and not PageLines.

For the position, try adding this to your custom CSS.

 .ngg-imagebrowser { width: 750px; margin: auto; }


#8 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 05 September 2012 - 10:47 AM

Danny, I plan on creating new images at the correct size as opposed to using css to resize my current ones so I won't be needing that code but thanks anyway. Is there no help available at all on here regarding the positioning of the navigation and the editing of how the words appear? I believe it will be tucked away in the php edit files of the actual plugin but can someone help me out with it?

#9 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 05 September 2012 - 11:12 AM

Would you suggest hiding the bottom text widget and footer line on the gallery pages and creating a new line which will be part of the navigation in the php files?

#10 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 September 2012 - 03:02 PM

Yes, I would suggest adding the border to the navigation instead of keeping the bottom text widget there on the gallery pages. It makes more sense if the widget isn't going to be needed.

#11 johnlatham

johnlatham

    Super Member

  • Members
  • PipPipPipPip
  • 113 posts

Posted 05 September 2012 - 04:30 PM

Thanks Catrina, how would I go about telling certain pages not to display the footer stuff like the line an the widget? In terms of the gallery, I found the NextGEN one a bit too fiddly and couldn't create a nice transition and the whole page kept reloading! I have found a different one by Raygun called Portfolio Slideshow. So far so good, I have the elements I need plus an indexhibit style transition. http://www.mrjohnlatham.com/test-page

#12 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 05 September 2012 - 04:49 PM

You'd need to use the body tag ID in CSS to prevent certain pages from displaying the content you want to hide. For example, if you want to hide footer content on a page with the page ID 15, the CSS would look like this:

 body.page-id-15 SELECTORFORFOOTERCONTENT {display: none;}

SELECTORFORFOOTERCONTENT would be replaced with the selector for the footer content.