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

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



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

1
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie


Tutorial: 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.


--> Tutorials, tips and tricks <--
Using description to work like image in topiclist (PunBB & phpBB2)



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


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


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


- Result:




  • Only to template editing??
    Yes, only.





© PunBB Design


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)

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

2
Offline

  Guest

avatar
Guest
Hey Hancki,

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

Thanks.

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

3
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie
Done!

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

4
Offline

  tommycoo

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

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

5
Offline

  nanako

avatar
Punbb Guru
Punbb Guru
add image to the description.

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

6
Offline

  Hancki

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

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

7
Offline

  Hancki

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

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

8
Offline

  Shadow

avatar
Administrator
Administrator
@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 Very Happy )

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

9
Offline

  Hancki

avatar
Punbb Rookie
Punbb Rookie
Yeh, that's right Shadow! Very Happy
Tutorial is ready? Smile

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

10
Offline

  tommycoo

avatar
Punbb Senior
Punbb Senior
okay i understand Smile
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


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

11
Offline

  Hancki

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

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

12
Offline

  Shadow

avatar
Administrator
Administrator
Tutorial has been approved, point's added to user.

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

13
Offline

  Virus

avatar
★Moderator★
★Moderator★
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?

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

14
Offline

  Michael_vx

avatar
Punbb Junior
Punbb Junior
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

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

15
Offline

  Guest

avatar
Guest
@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.

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

16
Offline

  cata90

avatar
Punbb Rookie
Punbb Rookie
hello, it is thing possible to Phpbb3 version?

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

17
Offline

  Bossanova

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

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

18
Offline

  roseila

avatar
Punbb Rookie
Punbb Rookie

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

19
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