Modyfing details.html

[jrey]

Hello everybody. I have a question about a modification that Im needing in my template "details.html". Im using a template that allows me to show a thumbnail of the previous image and a thumbnail of the next image in the details page. I wanna put in the center ( between the previous and the next image ) the description that you use to see under an about the big photo in the details page. Im talking about this:



Image 1


And this is the html for this part:

<table width="450" border="0" align="center" cellspacing="0">
                        </br>
                          <tr>
                          <td valign="top" class="row1"><b>{lang_description}</b></td>
                          <td valign="top" class="row1">{image_description}</td>
                        </tr>
                         <tr>
                          <td valign="top" class="row2"><b>{lang_date}</b></td>
                          <td valign="top" class="row2">{image_date}</td>
                        </tr>
                        <tr>
                          <td valign="top" class="row1"><b>{lang_hits}</b></td>
                          <td valign="top" class="row1">{image_hits}</td>
                        </tr>
                         <tr>
                          <td valign="top" class="row2"><b>{lang_rating}</b></td>
                          <td valign="top" class="row2">{image_rating} ({image_votes} {lang_votes})</td>
                        </tr>
                          <tr>
                          <td valign="top" class="row1"><b>{lang_added_by}</b></td>
                          <td valign="top" class="row1">{user_name_link}</td>
                        </tr>
                        <tr>
                          <td colspan="2" valign="top" class="row2"><p>{if iptc_info}
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td class="bordercolor"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                                    <tr>
                                      <td class="head1" valign="top" colspan="2">IPTC Info</td>
                                    </tr>
                                  {iptc_info}
                                </table></td>
                              </tr>
                            </table>
                            {endif iptc_info}</td>
                          </tr>
                      </table>
                      </td>
                    </tr>
                  </table>

I wanna put that description in the point indicated with the big red arrow:


Image 2


Its html :

<table width="620" height="255" border="0" align="center" cellpadding="0" background="{template_url}/images/tbg.gif">
                                      <tr>
                                        <td width="28%"><div align="center">
                                            <table width="100%" border="0" cellpadding="0">
                                              <tr>
                                                <td align="center" valign="middle"><p>{if prev_image_name}<br />
                                                  {lang_prev_image}</p>
                                                    <table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
                                                      <tr>
                                                        <td align="center" valign="middle"><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="0" align="middle" /></a></td>
                                                      </tr>
                                                    </table>
                                                  <p><b><a href="{prev_image_url}">{prev_image_name}</a></b>{endif prev_image_name}&nbsp;</p></td>
                                              </tr>
                                            </table>
                                        </div></td>
                                        <td width="44%" align="center" valign="top">&nbsp;</td>
                                        <td width="28%"><div align="center">
                                            <table width="100%" border="0" cellpadding="0">
                                              <tr>
                                                <td align="center" valign="middle"><p>{if next_image_name}<br />
                                                  {lang_next_image}</p>
                                                    <table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
                                                      <tr>
                                                        <td align="center" valign="middle"><a href="{next_image_url}"><img src="{next_thumb_file}" border="0" align="middle" /></a></td>
                                                      </tr>
                                                    </table>
                                                  <p><b><a href="{next_image_url}">{next_image_name}</a></b>{endif next_image_name}</p></td>
                                              </tr>
                                            </table>
                                        </div></td>
                                      </tr>
                                    </table>

¿Anybody knows how must I edit the html if I want put the description of the big image ( image 1 ) in the space that is between the left and the right thmbnial ( image 2 ) ?

Thank you

Javi

[KurtW]

Hi,

test this code:

Code: [Select]

<div align="center"><center>
<table width="620" height="255" border="0" align="center" cellpadding="0" background="{template_url}/images/tbg.gif">
  <tr>
    <td width="28%"><div align="center"><center>
     <table width="100%" border="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle">{if prev_image_name}<br />
        {lang_prev_image}<table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
          <tr>
            <td align="center" valign="middle"><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="0" align="middle" /></a></td>
          </tr>
        </table>
       <b><a href="{prev_image_url}">{prev_image_name}</a></b>{endif prev_image_name}&nbsp;</td>
      </tr>
    </table>
    </center></div></td>
    <td width="44%" align="center" valign="middle"><div align="center"><center>
    <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%" align="center">
        <!-- ####################################### Start Description ################################### -->
        <table width="450" border="0" align="center" cellspacing="0">
          <tr>
            <td valign="top" class="row1"><b>{lang_description}</b></td>
            <td valign="top" class="row1">{image_description}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_date}</b></td>
            <td valign="top" class="row2">{image_date}</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_hits}</b></td>
            <td valign="top" class="row1">{image_hits}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_rating}</b></td>
            <td valign="top" class="row2">{image_rating} ({image_votes} {lang_votes})</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_added_by}</b></td>
            <td valign="top" class="row1">{user_name_link}</td>
          </tr>
          <tr>
            <td colspan="2" valign="top" class="row2">
            {if iptc_info}
            <table width="100%" border="0"  cellspacing="0" cellpadding="0">
              <tr>
                <td class="bordercolor">
                  <table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="head1" valign="top">IPTC Info</td>
                  </tr>
                  <tr>
                    <td>{iptc_info} </td>
                  </tr>
                </table>
                </td>
              </tr>
            </table>
           {endif iptc_info}
         <!-- ####################################### End Description ################################### -->
         </td>
          </tr>
        </table>
       </td>
      </tr>
    </table>
    </center></div></td>
    <td width="28%"><div align="center"><center><table width="100%" border="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle">{if next_image_name}<br />
        {lang_next_image}<table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
          <tr>
            <td align="center" valign="middle"><a href="{next_image_url}"><img src="{next_thumb_file}" border="0" align="middle" /></a></td>
          </tr>
        </table>
        <b><a href="{next_image_url}">{next_image_name}</a></b>{endif next_image_name}</td>
      </tr>
    </table>
    </center></div></td>
  </tr>
</table>
</center></div>   


http://www.jrey.net/foro/index.php
Cant find a copyright. Do you have bought a 4images licence  :

cu
Kurt

[jrey]

Hi KurtW. Thanks for your reply. Yes, I bought the script ( but actually Im redesigning the web and I test 4images in other gallery ). Ive tested your code and now its better, but not perfect. You can see here the result:



I dont understand why the rectangular form ist closing and opening again for show the next image. You can see also that the thumbnail and the name of it are centered only in horizontal sense. Do you have any suggestion ?.

Thanks in advance.

Javi

[KurtW]

Hi,

your code from the description is wrong.
To mutch

Code: [Select]

   </td>
  </tr>
 </table>
Test this code:

Code: [Select]

<div align="center"><center>

<table width="620" height="255" border="0" align="center" cellpadding="0 background="{template_url}/images/tbg.gif">
  <tr>
    <td width="28%"><div align="center"><center>
     <table width="100%" border="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle"><div align="center">
        {if prev_image_name}<br />
        {lang_prev_image}
        <table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
          <tr>
            <td align="center" valign="middle"><div align="center"><a href="{prev_image_url}"><img src="{prev_thumb_file}" border="0" align="middle" /></a></div></td>
          </tr>
        </table>
        <div align="center"><b><a href="{prev_image_url}">{prev_image_name}</a></b></div>
       {endif prev_image_name}</div></td>
      </tr>
    </table>
    </center></div>
   </td>
    <td width="44%" align="center" valign="middle"><div align="center"><center>
     <table border="0" width="100%" cellspacing="0" cellpadding="0">
      <tr>
        <td width="100%" align="center">
<!-- ####################################### Start Description ################################### -->
         <table width="450" border="0" align="center" cellspacing="0">
          <tr>
            <td valign="top" class="row1"><b>{lang_description}</b></td>
            <td valign="top" class="row1">{image_description}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_date}</b></td>
            <td valign="top" class="row2">{image_date}</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_hits}</b></td>
            <td valign="top" class="row1">{image_hits}</td>
          </tr>
          <tr>
            <td valign="top" class="row2"><b>{lang_rating}</b></td>
            <td valign="top" class="row2">{image_rating} ({image_votes} {lang_votes})</td>
          </tr>
          <tr>
            <td valign="top" class="row1"><b>{lang_added_by}</b></td>
            <td valign="top" class="row1">{user_name_link}</td>
          </tr>
          <tr>
            <td colspan="2" valign="top" class="row2">
            {if iptc_info}
           <table width="100%" border="0" cellspacing="0" cellpadding="0">
              <tr>
                <td class="bordercolor">
                 <table width="100%" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td class="head1" valign="top">IPTC Info</td>
                  </tr>
                  <tr>
                    <td>{iptc_info} </td>
                  </tr>
                 </table>
                </td>
              </tr>
            </table>
            {endif iptc_info}
           </td>
          </tr>
         </table>
<!-- ####################################### End Description ################################### -->
        </td>
      </tr>
    </table>
    </center></div></td>
    <td width="28%"><div align="center"><center>
    <table width="100%" border="0" cellpadding="0">
      <tr>
        <td align="center" valign="middle"><div align="center">
        {if next_image_name}<br />
        {lang_next_image}
        <table width="118" height="124" border="0" cellpadding="0" background="{template_url}/images/bg2.gif">
          <tr>
            <td align="center" valign="middle"><div align="center"><a href="{next_image_url}"><img src="{next_thumb_file}" border="0" align="middle" /></a></div></td>
          </tr>
        </table>
        <div align="center"><b><a href="{next_image_url}">{next_image_name}</a></div></b>
       {endif next_image_name}</div>
       </td>
      </tr>
     </table>
    </center></div>
   </td>
  </tr>
 </table>
</center></div>

cu
Kurt

[jrey]

Thanks !!. Seems to work perfect , but ... I think that maybe its better if I could insert the image description into a graphic like "bg2" . Well, I modified the size of bg2 and I saved it like bg3 with the correct size that I need ( 450 X 100 ), but I dont know how put this image like background of the description. I want to show the description like the thumbnail, but inside of "bg3" instead of "bg2". ¿It´s possible?. Ive tryed this, but not works...

<table width="450" height="100" border="0" cellpadding="0" background="{template_url}/images/bg3.gif">
</br>
<tr>
<td valign="top" class="row1"><b>{lang_description}</b></td>
<td valign="top" class="row1">{image_description}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_date}</b></td>
<td valign="top" class="row2">{image_date}</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_hits}</b></td>
<td valign="top" class="row1">{image_hits}</td>
</tr>
<tr>
<td valign="top" class="row2"><b>{lang_rating}</b></td>
<td valign="top" class="row2">{image_rating} ({image_votes} {lang_votes})</td>
</tr>
<tr>
<td valign="top" class="row1"><b>{lang_added_by}</b></td>
<td valign="top" class="row1">{user_name_link}</td>
</tr>
<tr>
<td colspan="2" valign="top" class="row2"><p>{if iptc_info}
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td class="bordercolor"><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="head1" valign="top" colspan="2">IPTC Info</td>
</tr>
{iptc_info}
</table></td>
</tr>
</table>
{endif iptc_info}</td>
</tr>
</table>
</td>
</tr>
</table>

Any suggestion ? Thanks

Javi

[KurtW]

Hi,

 :   :

Sorry, cant follow your ...

image description into a graphic like "bg2"

bg2 ?
bg3 ?

Code: [Select]

<table width="450" height="100" border="0" cellpadding="0" background="{template_url}/images/bg3.gif">You cant see the background image in this table?

Delete all classes (class="row1", class="row2") in the <td>


cu
KUrt

[jrey]

Hi Kurt. Thanks for your reply. I finally did it using the code modified and changing the percents and the size of the table.

Now Im gonna test your rating system mod. Seems to be great !!. One thing more. I saw in your web an awesome script that you are using for open the photos in real size, into the details page. What script or mod are you using ?.

Thanks in advance.

Javi.

[KurtW]

Hi jrey,

look here:

http://www.4homepages.de/forum/index.php?topic=15819.0   


cu
KUrt

[jrey]

Thanks for your reply Kurt. Ive installed the mod and works fine, but it shows the photo with the same size, and I wanna see the image in it "real size". For example, If I upload an image to my gallery with the size 900X500 I resize it to the "standard" width for my web: 770px. Then, could be nice that when you click on the image the photo were shown in it original size: 900X500. You know how can I do this ?.

Thanks for everything Kurt

Javi

[CeJay]

Then, could be nice that when you click on the image the photo were shown in it original size: 900X500. You know how can I do this ?.

http://www.4homepages.de/forum/index.php?topic=15525.0

[jrey]

Hi CeJay. Thanks for your reply. The mod works nice and now I can open a new window with the image in it original size, but I wanna do this with the script "lightbox" and I dont Know how mix both mods for work properly. I saw in the web of the script that they are doing that Im looking for with thumbnails that they put in the web working like demo. I want to do this exactly ( when I click on the image its opening the original image from the "big" folder, but with the script "lightbox" working in it ). Any solution?

Thanks

Javi