Greetings,

I hope that I am not getting annoying with this gallery. I really need to get it working. I hope and pray that someone on here will be able to give me something that will make it work.

Alright, this time, I have it inside the site that I am making it for. That way, we can make sure that the CSS is compatible. Now, I need to make the ul.gallery expand with its content, making the #content expand with it, despite the absolute positioning of ul.gallery. I am using a div.prop and a div.clear to act like a sort of min-height system, just to let you know.

Is there a better way to do this? What can I do to make the gallery always fit? Thanks.

  • Are all the thumbnails going to be the exact same size? Abinadi Ayerdis about 7 years ago
  • Also, are you going to generate real thumbnails, or will you just resize them with html like in the example? Abinadi Ayerdis about 7 years ago
  • All the thumbnails will be the same size, and they will be generated via php. Jay Lauser about 7 years ago

3 answers

0
points
This was chosen as the best answer

Since you don't know how many galleries there will be (maybe should have mentioned that in the original question), just modify the following:

JAVASCRIPT:

var lastGID = 'gallery1';

function toggleG(gid) {
    hide(lastGID);
    lastGID = gid;

    reveal(gid);
}

CSS:

remove this:

#gallery2, #gallery3, #gallery4, #gallery5 {
    display: none;
}

add this in its place:

#my_left_col div {
    display: none;
}

#gallery1 {
    display: block;
}

The rest you handle with PHP.

Answered about 7 years ago by Abinadi Ayerdis
  • Ah! That makes sense. Thank you. I am using your system, with a few alterations. :) Jay Lauser about 7 years ago
  • Problem: I need the right div to be fixed width, and the left div to fill the remaining space on the left. It is all also supposed to be contained in another div. This is not working very well. Any ideas? Jay Lauser about 7 years ago
0
points

I noticed that you have the gallery inside of an ordered list. Try using a div as your base container, and then use your div.prop and div.clear to take care of the height so that the gallery pictures open up the containing box.

Answered about 7 years ago by tahdhaze09
0
points

Okay, the reason that the prop/clear method wasn't working for you is because you have the gallery positioned as absolute. The prop/clear method is designed to work with floating elements.

I have a potential javascript solution for you. It is fairly simple, but here is what I did:

Add this function to your javascript:

function toggleG(gid) {
    hide('gallery1');
    hide('gallery2');
    hide('gallery3');
    hide('gallery4');
    hide('gallery5');

    reveal(gid);
}

Use this setup in the content div instead of the gallery div you have now (you will note that I didn't use a ul. Instead, I put each gallery inside div tag and gave each an id. Then I added the javascript to the links. This forces a mouse click instead of onmouseover.):

<div id="my_container">
    <div class="prop"></div>

    <div id="my_left_col">
        <div id="gallery1">
            <a href="01firstgallery/img1.jpg"><img src="01firstgallery/img1.jpg"></a>
        </div>

        <div id="gallery2">
            <a href="02second gallery/img2.jpg"><img src="02second gallery/img2.jpg">
        </div>

        <div id="gallery3">
            <a href="03gallery/img3.jpg"><img src="03gallery/img3.jpg"></a>
        </div>

        <div id="gallery4">
            <a href="04gallery/img4.jpg"><img src="04gallery/img4.jpg"></a>
        </div>

        <div id="gallery5">
            <a href="05gallery/img18.jpg"><img src="05gallery/img18.jpg"></a>
        </div>
    </div>

    <div id="my_right_col">
        <ul>
            <li><a href="javascript://" onclick="toggleG('gallery1')">first gallery</a></li>
            <li><a href="javascript://" onclick="toggleG('gallery2')">second gallery</a></li>
            <li><a href="javascript://" onclick="toggleG('gallery3')">third gallery</a></li>
            <li><a href="javascript://" onclick="toggleG('gallery4')">fourth gallery</a></li>
            <li><a href="javascript://" onclick="toggleG('gallery5')">fifth gallery</a></li>
        </ul>
    </div>

    <div class="clear"></div>
</div>

Finally, the CSS for formatting (you will note that the div's have borders so that you can clearly see where the boundaries are; however, these should be removed or changed for the final product, obviously. Also, I didn't mess with any hovering over the img's, but that is easy enough to add. Oh, and this will resize automatically as you add more and more images.):

#my_container {
    border: 1px solid red;
    width: 755px;
}

#my_left_col {
    float: left;
    width: 640px;
    min-height: 100px;

    border: 1px solid blue;
}

#my_right_col {
    float: right;
    width: 110px;

    border: 1px solid green;
}

#my_container ul {
    list-style-type: none;
    margin-left: 0;
    padding-left: 0;
}

#my_container ul li a {
    padding: 3px;
    display: block;
}

#my_container img {
    width: 50px;
    height: 50px;
}

#gallery2, #gallery3, #gallery4, #gallery5 {
    display: none;
}

.clear {
    clear: both;
}

One final thought: I don't think it is a good idea to just resize the images with CSS or HTML because your users will be downloading all of the full sized images and then doing the resizing. It would be much quicker for them to download smaller files. Not to mention that browser resizing doesn't make very good looking images.

Answered about 7 years ago by Abinadi Ayerdis
  • Alright, some good ideas there. However, I am generating this whole thing with php based off of a provided filesystem. That means I have no idea how many galleries there will be. That is all generated. How can the javascript work that way? Jay Lauser about 7 years ago