tags:

views:

50

answers:

1

I am trying to fix something in someone's website.

Unfortunatley, the website is built on a CMS called GeekPak and is built in PHP. I know php a little but I am no expert in it.

I've been trying to resolve the following for quite a while now.

Problem: If you go on this page you will see a thumbnail gallery in bottom right. There are 6 images in the gallery. First two are spacers (nothing.gif). Problem is that instead of those spacers coming towards the bottom right...they are coming in the upper left. I think who ever developed it, is filling everything with nothing.gif and then replacing it with images but they are going from Right to Left...instead of Left to Right.

Following is the code and I can not make any sense of it.

<tr>
    <td class="galleryThumbs">
        <div class="sepinator"></div>
        <div class="extlinkinator">
            <a href="javascript:extClick();" id="externalLink"></a>
        </div>
        <div class="paginator">
            <a href="javascript:leftClick();" id="arrowL" class="arrowL0"><img src="/templates/images/nothing.gif" width="12" height="11" border="0" alt="" /></a>
            <a href="javascript:rightClick();" id="arrowR" class="arrowR0"><img src="/templates/images/nothing.gif" width="12" height="11" border="0" alt="" /></a>
       </div>
       <br clear="all" />
       <a href="javascript:setBig('8');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb8" /></a>
       <a href="javascript:setBig('7');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb7" /></a>
       <a href="javascript:setBig('6');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb6" /></a>
       <a href="javascript:setBig('5');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb5" /></a>
       <br>
       <a href="javascript:setBig('4');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb4" /></a>
       <a href="javascript:setBig('3');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb3" /></a>
       <a href="javascript:setBig('2');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb2" /></a>
       <a href="javascript:setBig('1');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb1" /></a>
       ~3*GALLERY_THUMBS_ALT[where=a.topicID='~1#tid#']*
       <br />
       <img src="/templates/images/nothing.gif" width="339" height="1" border="0" alt="" /></td>
</tr>

Can someone guide me in some direction from where I can go about fixing this? Also, what is GALLERY_THUMBS_ALT? No where in the code do I see that function.

Edit: If you hover over the images in the gallery you will notice that they start from 8 and decease to 1. Basically they should start form 1 and increase to 8

If I change the code so that setBig('8') becomes setBig('1') and so on...then it starts to look like this :(

gallerySmallEmpy is following

IMG.gallerySmallEmpty
{
    border-color:     #FFF;
    border-width:     1px;
    border-style:     solid;
    margin:     10px 0 0 10px;
}
+2  A: 

Hi,

Start by searching in the css for the class ".gallerySmallEmpty", and see what's in there .. althought I think you just have to change your code into this :

<tr>
    <td class="galleryThumbs">
        <div class="sepinator"></div>
        <div class="extlinkinator">
            <a href="javascript:extClick();" id="externalLink"></a>
        </div>
        <div class="paginator">
            <a href="javascript:leftClick();" id="arrowL" class="arrowL0"><img src="/templates/images/nothing.gif" width="12" height="11" border="0" alt="" /></a>
            <a href="javascript:rightClick();" id="arrowR" class="arrowR0"><img src="/templates/images/nothing.gif" width="12" height="11" border="0" alt="" /></a>
       </div>
       <br clear="all" />
       <a href="javascript:setBig('1');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb8" /></a>
       <a href="javascript:setBig('2');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb7" /></a>
       <a href="javascript:setBig('3');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb6" /></a>
       <a href="javascript:setBig('4');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb5" /></a>
       <br>
       <a href="javascript:setBig('5');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb4" /></a>
       <a href="javascript:setBig('6');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb3" /></a>
       <a href="javascript:setBig('7');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb2" /></a>
       <a href="javascript:setBig('8');"><img src="/templates/images/nothing.gif" width="73" height="91" border="1" alt="" class="gallerySmallEmpty" id="thumb1" /></a>
       ~3*GALLERY_THUMBS_ALT[where=a.topicID='~1#tid#']*
       <br />
       <img src="/templates/images/nothing.gif" width="339" height="1" border="0" alt="" /></td>
</tr>
  • Notice that I change the order of the gallery presentation (numbers)
yoda
Omnipresent
sorry, change id="thumb8" in the end of every image gallery to the respective numbers the have in javascript:setBig('8'); , that should be enought.
yoda
Omnipresent
ok nevermind. it is working now. thanks. but is it possible so that bottom of gallery is aligned with where the big image ends? thanks again!
Omnipresent
That deppends on the content you have above the gallery thumbnails, since it will probably expand when you add more text to it .. you can try, por example, set the div (or other element) above the thumb gallery with min-height, so the thumbs end where the image ends.
yoda