Good art is a taste, good design is an opinion.


Come as guest, stay as family.
Board Index

Come as guest, stay as family.


You are not connected. Please login or register

Foto

[Solved] How to show images at topic_list_box



View previous topic View next topic Go down Message [Page 1 of 1]

1
Offline

  Lốc1234

avatar
Newbie
Newbie

How to get images like this just outside the PunBB.biz



And


give me this code

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

2
Offline

  Shadow

avatar
Administrator
Administrator
#1 - It's the description place used as an image.

Here is the way how to do similar like here:

Spoiler:
- topics_list_box template
Search:
Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
Replace:
Code:
<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup"><img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>

- CSS:
Code:
.pun tbody.statused td.tcl {
  padding-right: 10px !important;
}
img.hanckidesc {
  float: right !important;
}
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
  padding: 1px !important;
  z-index: 10 !important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); 
}
.lightboxOverlay {
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
  position:fixed;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  line-height: 0;
  font-weight: normal;
}
.lightbox img.lb-image {
  position:fixed;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

- JS:
Code:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});

$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

Second one is the tagging system which uses the external server to store php requests of tagging and it's specially reserved for Punbb.biz.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

3
Offline

  Lốc1234

avatar
Newbie
Newbie
@Shadow wrote:[link="/t322-please-help-me-this-code#1909"]#1 - It's the description place used as an image.

Here is the way how to do similar like here:

Spoiler:
- topics_list_box template
Search:
Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
Replace:
Code:
<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup"><img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>

- CSS:
Code:
.pun tbody.statused td.tcl {
  padding-right: 10px !important;
}
img.hanckidesc {
  float: right !important;
}
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
  padding: 1px !important;
  z-index: 10 !important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); 
}
.lightboxOverlay {
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
  position:fixed;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  line-height: 0;
  font-weight: normal;
}
.lightbox img.lb-image {
  position:fixed;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}

- JS:
Code:
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});

$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})

Second one is the tagging system which uses the external server to store php requests of tagging and it's specially reserved for Punbb.biz.




it does not work

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

4
Offline

  Shadow

avatar
Administrator
Administrator
Please don't double post, use edit button instead. It's working and you need to put just image as topic description.

Also for tagging system like i've told you it's private.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

5
Offline

  Lốc1234

avatar
Newbie
Newbie
@Shadow wrote:[link="/t322-please-help-me-this-code#1913"]Please don't double post, use edit button instead. It's working and you need to put just image as topic description.

Also for tagging system like i've told you it's private.

topics_list_box
it does not work

Code:
<style>.pun tbody.statused td.tcl {
  padding-right: 10px !important;
}
img.hanckidesc {
  float: right !important;
}
img.hanckidesc {
  max-width: 150px !important;
  max-height: 50px !important;
  margin-top: -10px !important;
  padding: 1px !important;
  z-index: 10 !important;
  -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75);
  box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); 
}
.lightboxOverlay {
  top: 0;
  left: 0;
  z-index: 999;
  background-color: black;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
  opacity: 0.8;
  display: none;
  position:fixed;
}
.lightbox {
  position: absolute;
  left: 0;
  width: 100%;
  z-index: 999;
  line-height: 0;
  font-weight: normal;
}
.lightbox img.lb-image {
  position:fixed;
  margin: auto;
  top: 0; left: 0; bottom: 0; right: 0;
}
</style>

      <script type="text/javascript">
$(document).ready(function() {
    $.getScript('https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js');
});
$(function () {
        $('input[name="description"]').change(function () {
            var ValidFileExtension = ['jpg', 'JPG', 'jpeg', 'JPEG', 'png', 'PNG', 'gif', 'GIF', 'bmp','BMP'];
        if ($.inArray($(this).val().split('.').pop().toLowerCase(), ValidFileExtension) == -1) {
            alert("Sorry, the allowed file extensions are: '.jpeg','.jpg', '.png', '.gif', '.bmp'");
        }
    })
})
      </script>
<!-- BEGIN topics_list_box -->
<!-- BEGIN row -->
<!-- BEGIN header_table -->
   <!-- BEGIN multi_selection -->
      <script type="text/javascript">
      function check_uncheck_main_{topics_list_box.row.header_table.BOX_ID}() {
         var all_checked = true;
         for (i = 0; (i < document.{topics_list_box.FORMNAME}.elements.length) && all_checked; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            all_checked = document.{topics_list_box.FORMNAME}.elements[i].checked;
         }
         }
         document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked = all_checked;
      }
      function check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}() {
         for (i = 0; i < document.{topics_list_box.FORMNAME}.length; i++) {
         if (document.{topics_list_box.FORMNAME}.elements[i].name == '{topics_list_box.FIELDNAME}[]{topics_list_box.row.header_table.BOX_ID}') {
            document.{topics_list_box.FORMNAME}.elements[i].checked = document.{topics_list_box.FORMNAME}.all_mark_{topics_list_box.row.header_table.BOX_ID}.checked;
         }
         }
      }
      </script>
   <!-- END multi_selection -->

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <h1 class="page-title">{topics_list_box.row.L_TITLE} [{topics_list_box.row.COUNT_TOTAL_TOPICS}]</h1>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
<!-- END header_table -->

<!-- BEGIN header_row -->
<strong>{topics_list_box.row.L_TITLE}</strong>
<!-- END header_row -->

<!-- BEGIN topic -->
   <!-- BEGIN table_sticky -->
      </tbody>
   </table>
   </div>

   <div class="main-head">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" /   >
      <!-- END multi_selection -->
      <h2>{topics_list_box.row.topic.table_sticky.L_TITLE} [{topics_list_box.row.topic.table_sticky.COUNT_TOTAL_TOPICS}]</h2>
   </div>
   <div class="main-content">
   <table cellspacing="0" class="table">
      <thead>
         <tr>
            <th class="tcl">{L_TOPICS}</th>
            <th class="tc2">{topics_list_box.row.topic.table_sticky.L_REPLIES}</th>
            <th class="tc3">{topics_list_box.row.topic.table_sticky.L_VIEWS}</th>
            <th class="tcr">{topics_list_box.row.topic.table_sticky.L_LASTPOST}</th>
         </tr>
      </thead>
      <tbody class="statused">
   <!-- END table_sticky -->
      <tr>
         <td class="tcl tdtopics <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">
            <span class="status">
               <img title="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" src="{topics_list_box.row.TOPIC_FOLDER_IMG}" alt="{topics_list_box.row.L_TOPIC_FOLDER_ALT}" />
            </span>
            <!-- BEGIN single_selection -->
            <input type="radio" name="{topics_list_box.FIELDNAME}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} />&nbsp;
            <!-- END single_selection -->
            {topics_list_box.row.ICON}&nbsp;
            {topics_list_box.row.NEWEST_POST_IMG}
            {topics_list_box.row.PARTICIPATE_POST_IMG}&nbsp;
            {topics_list_box.row.TOPIC_TYPE}&nbsp;
            <h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>&nbsp;
            {topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}&nbsp;
            {topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
            <!-- BEGIN switch_description -->
            <br />
            &nbsp;<a rel="lightbox" href="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}" id="hanckidescpopup"><img class="hanckidesc" src="{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}"/></a>
            <!-- END switch_description -->
         </td>
         <td class="tc2 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.REPLIES}</td>
         <td class="tc3 <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.VIEWS}</td>
         <td class="tcr <!-- BEGIN line_sticky --> sticky-separator <!-- END line_sticky -->">{topics_list_box.row.LAST_POST_TIME} {topics_list_box.row.L_BY} {topics_list_box.row.LAST_POST_AUTHOR} {topics_list_box.row.LAST_POST_IMG}</td>
         <!-- BEGIN multi_selection -->
         <td><input onclick="javascript:check_uncheck_main_{topics_list_box.row.BOX_ID}();" type="checkbox" name="{topics_list_box.FIELDNAME}[]{topics_list_box.row.BOX_ID}" value="{topics_list_box.row.FID}" {topics_list_box.row.L_SELECT} /></td>
         <!-- END multi_selection -->
      </tr>
<!-- END topic -->
<!-- BEGIN no_topics -->
<tr>
   <td class="tcl" colspan="4"><strong>{topics_list_box.row.L_NO_TOPICS}</strong></td>
</tr>
<!-- END no_topics -->

<!-- BEGIN bottom -->
      </tbody>
   </table>
   </div>
   <div class="main-foot clearfix">
      <!-- BEGIN multi_selection -->
      <input onclick="check_uncheck_all_{topics_list_box.row.header_table.BOX_ID}();" type="checkbox" name="all_mark_{topics_list_box.row.header_table.BOX_ID}" value="0" />
      <!-- END multi_selection -->
      <p class="h2">{L_TOPICS} [{topics_list_box.row.bottom.COUNT_TOTAL_TOPICS}]</p>
      <p class="options">
         <a href="{U_MARK_READ}">{L_MARK_TOPICS_READ}</a>&nbsp;{S_WATCH_FORUM}&nbsp;<a href="#top">{L_BACK_TO_TOP}</a>
      </p>
   </div>
<!-- END bottom -->
<!-- BEGIN spacer --><br /><!-- END spacer -->
<!-- END row -->
<!-- END topics_list_box -->

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

6
Offline

  Shadow

avatar
Administrator
Administrator
I've tested your [ic]topics_list_box[/ic] on test forums and it's working.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

7
Offline

  Lốc1234

avatar
Newbie
Newbie
@Shadow wrote:[link="/t322-please-help-me-this-code#1917"]I've tested your [ic]topics_list_box[/ic] on test forums and it's working.

http://loc2000.forumvi.com/f1-forum

tại sao nó không hoạt động ??


ID : *Removed*
pass: *Removed*

Please remember that all publicly displayed messages are limited to English.

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

8
Offline

  Shadow

avatar
Administrator
Administrator
Like I've told you it's working check it I put some examples in 2 topics on your test forms.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

9
Offline

  Lốc1234

avatar
Newbie
Newbie
it has been operating

but it still fails
please see

http://loc2000.forumvi.com/f1-forum

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

10
Offline

  Shadow

avatar
Administrator
Administrator
Because you're not putting image at Topic Description.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

11
Offline

  Lốc1234

avatar
Newbie
Newbie
@Shadow wrote:[link="/t322-please-help-me-this-code#1928"]Because you're not putting image at Topic Description.

oh
thankkiu Very Happy
thankkiu Very Happy :X

Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:

12
Offline

  Shadow

avatar
Administrator
Administrator
Solved -> Locked.

Powered by PunBB
Currently 0 users have thanked Shadow for this post:

13
Offline

  Sponsored content



Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:

View previous topic View next topic Back to top Message [Page 1 of 1]


Topic URL's

URL
BBcode
HTML

Permissions in this forum:
You cannot reply to topics in this forum