GabrielHaze

Forum Replies Created

Viewing 6 replies - 1 through 6 (of 6 total)

  • You can right click and “view source” on the following page to see my code:

    https://afterthethird.com/official/the-characters/

    The actual code I used in the page starts halfway down, after the standard CSS that the plugin uses.

    I have managed to get wordpress to let me code a page just below the standard navigation. Meaning, when I create a “new” page using wordpress I use the space that allows you to use HTML and begin my CSS string there. It seems to override anything set by the CSS that the plugin uses, the page starts like this:

    <head>
    <style type=”text/css”>
    <!–
    #wrapper {
    background-color: transparent;
    height: 900px;
    width: 985px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 0px;
    margin-bottom: 0px;
    }

    OMG I GOT IT TO WORK! SHARE WITH ALL!!!!!

    Okay…. first, the only plugin I found that this works with and actually looks relatively nice is:
    “Shadowbox JS”
    A javascript media viewer similar to Lightbox and Thickbox. Supports all types of media, not just images.
    Version 3.0.3.10.2 | By Matt Martz

    After you install it and get it updated, you need to do the following in order to have a completely separate thumbnail image that is different from the larger one:

    Step 1: Create the <div> thumbnail equivalent.

    First, in your CSS code you need to make the image that you want as your thumbnail the background image of a <div> tag. For those of you who know code, generally you would do this in a “wrapper” for a repeating background image and this is very similar without the repeat.

    Say you have a thumbnail that is 50 x 50 pixels.
    In your CSS you make a <div> tag that is 50×50 pixels, then make the background image the link to your thumbnail image with the “no-repeat” css. It will look like this:

    #content {
    height: 225px;
    width: 250px;
    background-image: url(link to image thumbnail);
    background-repeat: no-repeat;
    }

    Step 2: Create a hyperlink using block display

    As you know, all that 1 does is put a bg image in an empty vessel, so we still need to make that empty vessel a clickable link.

    As a result you add an additional line of CSS that reads like this:

    #content a {
    display: block;
    height: 225px;
    width: 250px;
    }

    Step 3: Callout the Shadowbox in your HTML code.

    Finally, all you need to do is callout the shadowbox using a link within the <div> tag.

    My code looks like this:

    <div id=”content”></div>

    And that seems to work!

    As I said earlier, I have gotten close similar turnout from other plugins, but in all honesty it seems that for a straightforward, nice looking plugin that’s sleek and needs no design changes, it works the most “headache” free.

    I am having the same issue even with lightbox plus. I am beginning to think this is a WordPress problem since you guys mentined the problem with nexgen.

    As much as this is going to kill me, I am going to try to hard code the lightbox plugin as if I wasn’t using WordPress and see what happens. Maybe I will get lucky if I point the js and css files in a different path?

    Hey Susie,

    Try going to page again. I forgot to reactivate lightbox.

    I read another post where someone used the NexGen + NGG Custom Fields, but alas the post wasn’t descriptive enough and therefore unsuccessful. I am so confused and don’t know what to do.

    I would just hard code the lightbox from my original site, but the file structure of WordPress is so huge that I have know idea where to put the files.

    Dearest Susie,

    Maybe we can work together.

    Sadly, you and I are in the same boat. It seems that Lightbox was far more functional when you had to hard code it without using WordPress. My issue is nearly identical in that I have gotten it to allow me to have a different thumbnail (not sure how) but when you click on the image the slideshow quadruples each larger image. So a page with 16 thumbnails turns into a slideshow of 66 images!

    This functionality was an accident that maybe you can look at and somehow we can find a solution. Below are the two site pages in question:

    Here’s my original (non wordpress site page) where the lightbox functions how I want it to:
    https://www.afterthethird.gabrielhaze.com/characters.html

    Here’s the new (wordpress site page) where the lightbox quadruples each larger image.
    https://afterthethird.com/official/the-characters/

    (p.s. this site is still being worked on and is not “officially” live)

    Before anything else, I just copied the code language from the original site to get it to let me have the different thumbnails. Now if you can help me figure out why it even works and how to eliminate the quadrupling effect we will be on our way.

    Sincerely,

    HAZE

Viewing 6 replies - 1 through 6 (of 6 total)