WordPress.org

Ready to get started?Download WordPress

Forums

NextGEN Gallery
want to resize " (7 posts)

  1. dariel
    Member
    Posted 3 years ago #

    Hi. I'd like to customize the look of the image browser. Right now the next/last buttons are << and >>, and they're really large. How do I make them smaller? I've looked all through the css and the imagebrowser.php files, but I'm a novice and I've got bubkis (nothing).

    http://www.dariel.com

    Thanks for your help!

    http://wordpress.org/extend/plugins/nextgen-gallery/

  2. medinauta
    Member
    Posted 3 years ago #

    Those arent images but special ascii characters, you can find them in nextgen-gallery\view\imagebrowser.php

    The css file depends of which you had selected, maybe is "nggallery.css" inside de css folder.

    .ngg-imagebrowser-nav
    .ngg-imagebrowser-nav .next
    .ngg-imagebrowser-nav .back

  3. dariel
    Member
    Posted 3 years ago #

    Hello Medinauta,

    I changed the ascii characters from ◄ and ►, which are triangular arrow pointers, to ← and →, which are arrows at the end of a line. It's already puzzling because I was expecting the laquo and raquo code or their numeric equivalent, since that's what it looks like on the screen, like this: << and >>. Anyway, I changed it in imagebrowser.php, imagebrowser-caption.php, and imagebrowser-exif.php, and nothing happened. I looked through nggallery.css for the imagebrowser bits, but there's no ascii code there. Any ideas?

  4. medinauta
    Member
    Posted 3 years ago #

    I thought you were asking how to change the size of those... because those are ascii codes its size are changed with the "font-size" style. Maybe I am misunderstanding your question.

  5. dariel
    Member
    Posted 3 years ago #

    The size is indeed part of the question. I think I misunderstood you. I want to change the size, yes, but I'd also like to switch the ascii itself to another character.

  6. medinauta
    Member
    Posted 3 years ago #

    Let see if I understand :D

    - "Image browser" is the template mode where the gallery shows one picture at a time in a "browser" style, again, its an alternative to the thumbnail grid mode where all the pictures are shown. ex: [imagebrowser id=38]

    - "Gallery view" is the template mode for a gallery overview, it shows the thumbnail of the pictures in an album at once, the grid of pictures. ex:[album id=38]

    When in "gallery view", you have the option to choose a js overlay image script (lightbox, thickbox, hisghslide, etc).

    Seems to me that your question is regarding the arrows that your overlay shows (your website says you are using the "shutter" effect), my response was about the arrows shown when you select "Image Browser" ([imagebrowser id=38]).

    To change the navigation arrows of your javascript image overlay, you need to modify that overlay's files:

    For shutter:
    1. Open \plugins\nextgen-gallery\shutter\shutter-reloaded.js
    2. Look for:
    prevlink = '<a href="#" onclick="shutterReloaded.make('+prev+');return false">& lt ;& lt ;</a>'+dv;
    3. Change the & lt ;& lt ; for your desired PREVIOUS ascii code or image
    4. Look for:
    nextlink = '<a href="#" onclick="shutterReloaded.make('+next+');return false">& gt ;& gt;</a>'+dv;
    5. Change the & gt ;& gt; for your desired NEXT ascii code or image
    6. Save and try

    You can handle the size changing the "shutter-reloaded.css" file in the same folder.

    #shDisplay div#shNext{
    	float:right;
            font-size:8px;
    }
    
    #shDisplay div#shPrev {
    	float:left;
            font-size:8px;
    }
  7. dariel
    Member
    Posted 3 years ago #

    Ah, I see. Yes, it is the shutter code that's in question. Well, I changed the characters in the js file, which worked. Next, for the size. In case others are wondering, the size cannot be change in the css file here:

    #shDisplay div#shNext{
    float:right;
    }
    #shDisplay div#shPrev {
    float:left;
    }

    It must be changed here instead:

    #shDisplay div#shTitle a {
    text-decoration: none;
    font: bold 14px 'Courier New', Courier, fixed;
    etc.....
    }

    The arrows are links, so turns out they're controlled here in "Title a."

    Thanks so much!

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.