fancy images pagination « My Site My Way Support

fancy images pagination

resolved (26 posts) (5 voices)

buggerlugs
Member

Hi
I'm adding images to a "gallery page with "fancy images". Can i limit the number that appear on each page or will i be stuck with all of them on one?

thanks

Posted 2 years ago #
Uniq
Support

Hello buggerlugs,

I would suggest you setting up a gallery to enable pagination. It should also save you some time!

Let me know if you need further assitance with this or you know how to do it.

Best Regards,
Dorian

Posted 2 years ago #
buggerlugs
Member

Hi
I dont understand what you mean?

Posted 2 years ago #
buggerlugs
Member

if you meant a portfolio as described on page 20 of the pdf and like here: http://themes.mysitemyway.com/awake/galleries/portfolio-4-columns/ then this isnt what i want because i do not want text or links under the thumbnails

Posted 2 years ago #
Uniq
Support

Hello buggerlugs,

I think it would be easier to remove the text and links under the thumbnails than adding a pagination to that page. Would you like to go with this one?

Best Regards,
Dorian

Posted 2 years ago #
buggerlugs
Member

i dont want to make a page for every photo as described in that procedure - that would take forever and i dont want each image to have its own page - how can that be quicker than adding pagination??????????

Posted 2 years ago #
Uniq
Support

Hi buggerlugs,

I simply found that solution being quicker than adding a pagination, as doing this requires extra customization services at this time. My suggestion would be to look over for a plugin that can handle that for you. Sorry for any inconvenience!

Best Regards,
Dorian

Posted 2 years ago #
buggerlugs
Member

oh thats a bummer :( maybe it could be included in updates or something.

I'm looking at adding nextgen instead - what css is used to make the rounded boxes of the pretty photos, so i can use it in nextgen?

Posted 2 years ago #
Uniq
Support

Hi buggerlugs,

Here is the code that you will need to be adding:

background-color:#f5f5f5;
background:-moz-linear-gradient(bottom, #F2F2F2 0px, #fff 100%);
background:-webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #fff))}
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);}
padding:6px;margin:2px;

Let me know if you need further assistance with this!

Best Regards,
Dorian

Posted 2 years ago #
buggerlugs
Member

thanks for the help, i think ive got it soerted now :)

Posted 2 years ago #
Uniq
Support

Great buggerlugs,

Let me know if you need any other help!

Best Regards,
Dorian

Posted 2 years ago #
engeldeluxe
Member

Who works with the NextGenGallery?
I want to use it because it takes too long for each image to create a separate article. So I installed the plugin.

Does anyone have the correct CSS-Code for the NextGen Gallery-Style I have to change?
I am not sure about where I have to integrate it in. I use the nggallery.css.

And how can I in the file name in the lightbox (stands over the image above) comment out?
--> look here: http://www.wencke.org/reise/turkei-2011/

And between the breadcrumb and the start of my gallery is too much space. Does anyone have any advice how can I minimize it? I've tried with text on the gallery page in the trick, but there is for the integrated gallery still too much distance.

Posted 1 year ago #
Elliott
Support
Hello engeldeluxe,

See here for the nextgen gallery, http://mysitemyway.com/docs/index.php/NextGEN_Gallery.

As for the lightbox title try navigating to Dashboard -> your theme -> General Settings -> Custom CSS and add this line,
```
.pp_pic_holder .ppt {
    display: none !important;
}
```
As for the breadcrumbs try adding this line also,

#main { padding-top: 0px; }
Posted 1 year ago #
engeldeluxe
Member

oh, thank you. But does anyone have the right assignment how I have to name the CSS-Code that I will need to be adding > see Dorians post. Or put differently: What do I need to add exactly to the style-css to make the border around the thumbnails looks uniform. I'm using the nggallery.css. It does not work if I copy the text exactly in the nggallery.css.

best regards

Posted 1 year ago #
Elliott
Support

I'm sorry engeldeluxe but I am having trouble understanding. Can you take a screenshot and highlight the area or perhaps send us a link to your page so we can get a better idea?

Posted 1 year ago #
engeldeluxe
Member
Hi, oh ok, sorry, I try it better.

My Link is the gallery on page http://www.wencke.org/reise/turkei-2011. There I use the NextGenGallery. But now my problem is the different look of the border of the thumbnails > see screen "screen".
Dorian postet that I use to have to add this code:

(' background-color:#f5f5f5;
background:-moz-linear-gradient(bottom, #F2F2F2 0px, #fff 100%);
background:-webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #fff))}
box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .2);}
padding:6px;margin:2px; ')

So I added it in the style-css-file of the gallery nggallery.css > see screen "style". But nothing happened.
Do I have to add something special? Or only on a special place in the css-file?
Attachments
20111002_style.jpg (56.4 KB, 0 downloads) 1 year old
20111002_screen.jpg (95.1 KB, 1 downloads) 1 year old
Posted 1 year ago #

Ruderic
Support

Hi,

The problem here is that you are not assigning that CSS code to any element in your website. Let's try this: Replace the code that you pasted in the CSS editor with this new one:

.ngg-gallery-thumbnail img {
background-color:#f5f5f5 !important;
background:-moz-linear-gradient(bottom, #F2F2F2 0px, #fff 100%) !important;
background:-webkit-gradient(linear,left bottom,left top, color-stop(0, #f2f2f2),color-stop(1, #fff)) !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
-o-box-shadow: 0 1px 3px rgba(0, 0, 0, .2) !important;
padding:6px !important;
margin:2px !important;
}

Posted 1 year ago #

engeldeluxe
Member

Oh thank you! Great. It works. But now is the hover-effect is still missing. What should I do? I searched in the template-style, but I am not very sure.
I think there must be the file "zoom.png". The Code could be 'url(styles/_shared/zoom.png) 50% 50% no-repeat;' ? Where and what I have to add in the nggallery.css?

Posted 1 year ago #
Elliott
Support

Hello engeldeluxe,

You should be able to get the hover effect by opening up /wp-content/themes/[your_theme]/lib/scripts/custom.js and change line 33 from this,

jQuery('.hover_fade_js').live('hover', function(e) {

To this,

jQuery('.hover_fade_js, .ngg-galleryoverview img').live('hover', function(e) {

The zoom image may be a little more difficult but try navigating to Dashboard -> your theme -> General Settings -> Custom CSS and add this line,

.ngg-gallery-thumbnail a { background: url("DOMAIN NAME/wp-content/themes/THEME NAME/images/assets/zoom.png") no-repeat scroll center center transparent; }

And then replace "DOMAIN NAME" and "THEME NAME" with yours.

Posted 1 year ago #
engeldeluxe
Member
I only see this in /wp-content/themes/[your_theme]/lib/scripts/custom.js:
```
/* hover fade functions */ 
function fade_hover() { 
	jQuery('.fade_hover').hover( 
		function() { 
				jQuery(this).stop().animate({opacity:0.4},400); 
			}, 
			function() { 
				jQuery(this).stop().animate({opacity:1},400); 
		});
```
this ist different from yours code. What should I add here?

And I think in the awake-Style it should be

.ngg-gallery-thumbnail a { background: url("http://www.wencke.org/wp-content/themes/awake/styles/_shared/zoom.png") no-repeat scroll center center transparent; }

(the file-path is different) Or?
Posted 1 year ago #
Elliott
Support

If your on Awake 1.3 then it's line 21,

jQuery('.fade_hover').hover(

Posted 1 year ago #
engeldeluxe
Member

yes, it ist awake 1.3. I copied your code
jQuery('.hover_fade_js, .ngg-galleryoverview img').live('hover', function(e) {

in custum.js, but the hover-effect doesn't work. Please, take a look: http://www.wencke.org/reise/turkei-2011/

I now add three times in my relevant files:
- style.css (style of Awake)
- nggallery.css (Style of nextgen)
- custom.js (from Awake)

Posted 1 year ago #
engeldeluxe
Member

here it is
http://download.wencke.org/relevantedateien.zip

--> (because of denied files upload)

Posted 1 year ago #
Elliott
Support

Try this,

jQuery('.fade_hover, .ngg-galleryoverview img').hover(

If your still having problems then send us a link to your page so we can take a closer look.

Posted 1 year ago #
engeldeluxe
Member
cool. It almost works. Now only the position of the background image is wrong (with a magnifying glass on it). Where could I change the style?
Look here: http://www.wencke.org/reise/turkei-2011/Where and what should I add?

here in the awake style.css: .ngg-gallery-thumbnail a { background: url(styles/_shared/zoom.png) no-repeat scroll center center transparent; } ???
Attachments
20111010_background-image1.jpg (57.4 KB, 0 downloads) 1 year old
Posted 1 year ago #
Elliott
Support

Instead of placing it on your link place it on the div like so,

.ngg-gallery-thumbnail { background: url(styles/_shared/zoom.png) no-repeat scroll center center transparent; }

Posted 1 year ago #