2014-02-23, 19:59
Board Index » Forumotion » [Read Only] Questions & Problems »[Solved] How to show images at topic_list_box
1
Newbie
Currently 0 users have thanked Lốc1234 for this post:
2
Administrator
2014-02-23, 20:15
#1 - It's the description place used as an image.
Here is the way how to do similar like here:
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.
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}
- 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.
Currently 0 users have thanked Shadow for this post:
3
Newbie
2014-02-23, 20:25
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:
Replace:
- Code:
{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}
- 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
Administrator
2014-02-23, 20:29
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.
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
Newbie
2014-02-23, 20:35
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} />
<!-- END single_selection -->
{topics_list_box.row.ICON}
{topics_list_box.row.NEWEST_POST_IMG}
{topics_list_box.row.PARTICIPATE_POST_IMG}
{topics_list_box.row.TOPIC_TYPE}
<h2 class="topic-title"><a class="topictitle" href="{topics_list_box.row.U_VIEW_TOPIC}">{topics_list_box.row.TOPIC_TITLE}</a></h2>
{topics_list_box.row.GOTO_OPEN} {topics_list_box.row.GOTO_PAGE_NEW} {topics_list_box.row.GOTO_CLOSE}
{topics_list_box.row.L_BY} {topics_list_box.row.TOPIC_AUTHOR}
<!-- BEGIN switch_description -->
<br />
<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> {S_WATCH_FORUM} <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
Administrator
2014-02-23, 23:35
I've tested your [ic]topics_list_box[/ic] on test forums and it's working.
Currently 0 users have thanked Shadow for this post:
7
Newbie
2014-02-24, 02:00
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.
Currently 0 users have thanked Lốc1234 for this post:
8
Administrator
2014-02-24, 08:20
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
Newbie
2014-02-24, 08:25
it has been operating
but it still fails
please see
http://loc2000.forumvi.com/f1-forum
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
Administrator
2014-02-24, 08:42
Because you're not putting image at Topic Description.
Currently 0 users have thanked Shadow for this post:
11
Newbie
2014-02-24, 09:25
Shadow wrote:[link="/t322-please-help-me-this-code#1928"]Because you're not putting image at Topic Description.
oh
thankkiu
thankkiu :X
Powered by PunBB
Currently 0 users have thanked Lốc1234 for this post:
12
Administrator
2014-02-24, 14:50
Solved -> Locked.
Powered by PunBB
Currently 0 users have thanked Shadow for this post:
13 Sponsored content
Sponsored content
Powered by PunBB
Currently 0 users have thanked Sponsored content for this post:
Topic URL's
URL | |
BBcode | |
HTML |
Permissions in this forum:
You cannot reply to topics in this forum
|
|