fancy images pagination

resolved (26 posts) (5 voices)

  1. 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 3 years ago #
  2. 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 3 years ago #
  3. Hi
    I dont understand what you mean?

    Posted 3 years ago #
  4. 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 3 years ago #
  5. 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 3 years ago #
  6. 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 3 years ago #
  7. 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 3 years ago #
  8. 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 3 years ago #
  9. 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 3 years ago #
  10. thanks for the help, i think ive got it soerted now :)

    Posted 3 years ago #
  11. Uniq
    Support

    Great buggerlugs,

    Let me know if you need any other help!

    Best Regards,
    Dorian

    Posted 3 years ago #
  12. 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 2 years ago #
  13. 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 2 years ago #
  14. 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 2 years ago #
  15. 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 2 years ago #
  16. 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

    1. 20111002_style.jpg (56.4 KB, 0 downloads) 2 years old
    2. 20111002_screen.jpg (95.1 KB, 1 downloads) 2 years old
    Posted 2 years ago #
  17. 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 2 years ago #
  18. 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 2 years ago #
  19. 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 2 years ago #
  20. engeldeluxe
    Member

    I only see this in /wp-content/themes/[your_theme]/lib/scripts/custom.js:

    /* hover fade functions */<br />
    function fade_hover() {<br />
    	jQuery('.fade_hover').hover(<br />
    		function() {<br />
    				jQuery(this).stop().animate({opacity:0.4},400);<br />
    			},<br />
    			function() {<br />
    				jQuery(this).stop().animate({opacity:1},400);<br />
    		});

    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 2 years ago #
  21. Elliott
    Support

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

    jQuery('.fade_hover').hover(

    Posted 2 years ago #
  22. 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 2 years ago #
  23. engeldeluxe
    Member

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

    --> (because of denied files upload)

    Posted 2 years ago #
  24. 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 2 years ago #
  25. 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

    1. 20111010_background-image1.jpg (57.4 KB, 0 downloads) 2 years old
    Posted 2 years ago #
  26. 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 2 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme