[Javascript] Using description to work like image in topiclist (PunBB & phpBB2)

For those who don't use the field "Description" because they think it is useless, there is now a new function for that. Put it working as image in topic list.





1º - Search and modify the template
Search for this template: topics_list_box
Now, search for this code:

Code:

{topics_list_box.row.topic.switch_description.TOPIC_DESCRIPTION}

Replace whit this one:

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>

2º - Adding The CSS
Now, add this CSS code to your CSS style sheet.

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;
}

3º - Adding the JS:
Add this JS into a new JS page, In All Pages.

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'");
        }
    })
})

4º - Result:

• Only to template editing??
  Yes, only.
  

---

If you have any questions related to this topic create a topic with the following title: Using description to work like image in topiclist (PunBB & phpBB2)

Hey Hancki,

If you wish your tutorial to be approved, please read the following guidelines about submitting a tutorial. https://punbb-design.forumotion.com/t3-submit-a-tutorial-read-carefully

Thanks.

Done!

so how this is working ?
is this automatic filled with image or we fill it in description ?

add image to the description.

You only have to put the link of the image in the description field and it turns to image in description by itself.

nanako wrote:[link="/t336-javascript-using-description-to-work-like-image-in-topiclist-punbb-phpbb2#1996"]add image to the description.

How?

Hancki wrote:[link="/t336-javascript-using-description-to-work-like-image-in-topiclist-punbb-phpbb2#2003"]

nanako wrote:[link="/t336-javascript-using-description-to-work-like-image-in-topiclist-punbb-phpbb2#1996"]add image to the description.

How?

He didn't pointed that on you to put image for this post, just answered the tommycoo's question (Even if he did, only administrator's can see description here )

Yeh, that's right Shadow!
Tutorial is ready?

okay i understand
here's some advice for stylish your lightbox
change this part of the css

Code:

.lightbox img.lb-image {
    position: fixed;
    margin: auto;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
}

with this

Code:

.lightbox img.lb-image {
    position: fixed;
    margin: auto;
    top: 0px;
    left: 0px;
    bottom: 0px;
    right: 0px;
    padding: 9px;
    background: none repeat scroll 0% 0% #FFF;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #FFF;
    border: 1px solid #808080;
}

this how it's look

Thanks! I don't need to change de code. Your answer can stay here to other people give you the credits

With this code, is it possible to arrange a code via css to set an image as a default image and when there is no image set in the description to use the default one?

i want to know is this image must be in description or it will take the 1st image in topic ?
i wonder about this part

Michael_vx wrote:[link="/t336-javascript-using-description-to-work-like-image-in-topiclist-punbb-phpbb2#2851"]i want to know is this image must be in description or it will take the 1st image in topic ?
i wonder about this part

It must be at description.

hello, it is thing possible to Phpbb3 version?

Seems like it'd be a nifty tool to try out.

Die Link??
https://raw.github.com/lokesh/lightbox2/master/js/lightbox.js