Community Forum |
You are here » Community Forum » New Forum Features » Get first image(s) of topic
Hi there, me again. 
My forum is image-intensive, and it would be lovely if I could get the first few images of each topic to display as thumbnails when hovering over a topic title, like this mockup:
Anyone have any brilliant ideas on how to get that done? As long as I can get the first images of the topics attached somehow to their respective topic titles, I can work out how best to display them with CSS 
Last edited by Buzzer (2017-06-23 07:37:51)
Buzzer
Try this script (to HTML footer)
<!-- Всплывающий текст последнего сообщения темы при наведении курсора -->
<div id="modal-m" class="m-message" style="top: 740px; display: none; left: 55%;">
<div class="main-container">
<span class="name-author"><strong></strong> написал(а):</span>
<span class="p-messages"></span>
</div>
</div>
<style type="text/css">
#modal-m {width: 250px; height: 155px; background-color: rgba(255, 255, 255, 1.0); box-shadow: 0 0 10px #666; position: absolute; border: 2px solid #336699; border-radius: 5px; padding: 10px; margin: 30px auto 0 160px; opacity: 0.9; }
#modal-m span {display: block; font-family: verdana;}
.name-author {width: 100%; height: 14px; margin-bottom: 15px; color: #4477aa;}
.p-messages {height: 120px; color: #555; max-height: 120px; overflow: hidden; margin-bottom: 10px;}
.p-messages img {max-height: 60px;}
/* Additional */
#modal-m {
transition: display 0.55s linear, opacity 0.55s linear;
}
#modal-m .quote-box{ display:none !important;}
#modal-m .quote-box+*{margin-top: -18px !important; }
@media screen and (max-width: 540px) {
#modal-m {
left: -110px !important;
}
}
</style>
<script type="text/javascript" src="https://forumstatic.ru/files/0015/c4/3f/31391.js"></script>
<!--//End//-Всплывающий текст последнего сообщения темы при наведении курсора-->
nice script: Pop-up text of the last topic message (appears in the last post column when hovering over the cursor)
How to pop-up text / image will also appear in the title column (forum) when hovering over the cursor..
Forum (How hover will also appear here)
Replies
Views
Last post: Today 21:22:50 (The script above works fine in this column)
Wonderful script Alex_63, thanks!
But is there any way we can modify it so it pulls images from the first post in the topic, instead of the last post? The reason is, on my forum, the first post in a topic is what is really interesting to my members, and all other posts are basically just ooh & aah comments. 
And can we adjust the number of images it displays? The first 4 would be enough for my use-case. If not, no biggie, I'll simply resize & hide stuff via CSS.
Also, testing on another not-yet-live forum before deploying to my active one, the script is working perfectly except for one little glitch: the thumbnail modal does not appear when hovering over a topic title in a parent forum. As seen in the screenshots below, it shows fine on the main page (1), a clickable category page (2), and a sub-forum (4), but not a parent forum (3):
Main page:
Clickable category page:
Parent forum:
Sub-forum:
Last edited by Buzzer (2017-06-24 14:42:32)
Buzzer
Try this variant:
<!-- Всплывающий текст последнего сообщения темы при наведении курсора -->
<div id="modal-m" class="m-message" style="display:none"><div class="main-container"><span class="p-messages"></span></div></div>
<style type="text/css">
#modal-m {background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.6);position:absolute;border:2px solid #336699;border-radius:5px;padding:10px;opacity:.9}
.p-messages {display:block;min-height:40px;min-width:100px;max-height:200px;max-width:600px;color:#555;overflow:hidden;}
.p-messages img {max-height:120px;}@media screen and (max-width:540px){#modal-m{left:-110px!important;}}
</style>
<script type="text/javascript">
$(function(){var e=$("#pun-main"),c=$("#modal-m"),d={},a='.category .tcr a[href*="viewtopic"],.forum .tcr a[href*="viewtopic"]';if(!e.length){return}var b=function(f){if(!f||!d[f]){return}c.find(".p-messages").html(d[f])};$("body").on("mouseenter",a,function(){var g=$(this).parents(".forum").length?$(this).parents("tr:first").find(".tcl a:first").attr("href"):$(this).attr("href");var f=/\?id=(\d+)/.exec(g)[1];c.find(".p-messages").empty();c.css({top:$(this).offset().top+$(this).height()+"px",left:$(this).offset().left-$(".punbb").offset().left+"px"}).stop(true,true).fadeIn(200,function(){c.find(".p-messages").html('<img src="https://forumstatic.ru/files/0015/c4/3f/79458.gif" alt="Loading"/>');if(!d[f]){$.get(g.replace(/&p=\d+.*$/,""),function(h){d[f]=$(h).find(".topicpost").find(".postimg").slice(0,4).wrapAll("<div/>").parent().html(),b(f)})}else{b(f)}})}).on("mouseleave",a,function(){c.fadeOut(200)});c.mouseenter(function(){c.stop(true,true).show().mouseleave(function(){c.fadeOut(200)})})});
</script>
<!--//End//-Всплывающий текст последнего сообщения темы при наведении курсора-->
How to pop-up text / image will also appear in the title column (forum) when hovering over the cursor..
I've not understood you very well... Hovering on which element in the left column should cause displaying of the pop-up?
sorry my english....i mean the tooltip not only appear in the last posting column (The last reply), but also on the main post title (The first post)
Last edited by kami (2017-06-24 18:22:46)
Alex_63
Oh, that's much better, thank you!
It still seems to be having a wee bit o' trouble on parent forums though; the loader just keeps spinning there (works perfectly everywhere else):
Do you think there may possibly be something conflicting in your lovely sub-forum script that I have running there too? ( Javascript Extensions )
Last edited by Buzzer (2017-06-24 19:05:37)
Buzzer
Trying to fix this bug:
<!-- Всплывающий текст последнего сообщения темы при наведении курсора -->
<div id="modal-m" class="m-message" style="display:none"><div class="main-container"><span class="p-messages"></span></div></div>
<style type="text/css">
#modal-m {background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.6);position:absolute;border:2px solid #336699;border-radius:5px;padding:10px;opacity:.9}
.p-messages {display:block;min-height:40px;min-width:100px;max-height:200px;max-width:600px;color:#555;overflow:hidden;}
.p-messages img {max-height:120px;}@media screen and (max-width:540px){#modal-m{left:-110px!important;}}
</style>
<script type="text/javascript">
$(function(){var e=$("#pun-main"),c=$("#modal-m"),d={},a='.category .tcr a[href*="viewtopic"],.forum .tcr a[href*="viewtopic"]';if(!e.length){return}var b=function(f){if(!f||!d[f]){return}c.find(".p-messages").html(d[f])};$("body").on("mouseenter",a,function(){var g=!$(this).parents(".category,#f-subforums").length?$(this).parents("tr:first").find(".tcl a:first").attr("href"):$(this).attr("href");var f=/\?id=(\d+)/.exec(g)[1];c.find(".p-messages").empty();c.css({top:$(this).offset().top+$(this).height()+"px",left:$(this).offset().left-$(".punbb").offset().left+"px"}).stop(true,true).fadeIn(200,function(){c.find(".p-messages").html('<img src="https://forumstatic.ru/files/0015/c4/3f/79458.gif" alt="Loading"/>');if(!d[f]){$.get(g.replace(/&p=\d+.*$/,""),function(h){d[f]=$(h).find(".topicpost").find(".postimg").slice(0,4).wrapAll("<div/>").parent().html(),b(f)})}else{b(f)}})}).on("mouseleave",a,function(){c.fadeOut(200)});c.mouseenter(function(){c.stop(true,true).show().mouseleave(function(){c.fadeOut(200)})})});
</script>
<!--//End//-Всплывающий текст последнего сообщения темы при наведении курсора-->
kami
Try this code (to HTML footer)
<!-- Всплывающий текст последнего сообщения темы при наведении курсора -->
<div id="modal-m" class="m-message" style="display:none"><div class="main-container"><span class="p-messages post-content"></span></div></div>
<style type="text/css">
#modal-m {background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,.6);position:absolute;border:2px solid #336699;border-radius:5px;padding:10px;opacity:.9}
.p-messages {display:block;min-height:40px;min-width:100px;max-height:200px;max-width:400px;color:#555;overflow:hidden;overflow-y:auto!important}
.p-messages img {max-height:120px;}@media screen and (max-width:540px){#modal-m{margin-left:-110px!important;}}
</style>
<script type="text/javascript">
$(function(){var e=$("#pun-main"),c=$("#modal-m"),d={},a='.tcl a[href*="viewtopic"],.category .tcr a[href*="viewtopic"],.forum .tcr a[href*="viewtopic"]';if(!e.length){return}var b=function(f,x){if(!f||!x||!d[f+"-"+x]){return}c.find(".p-messages").html(d[f+"-"+x])};$("body").on("mouseenter",a,function(){var g=$(this).attr("href"),m=$(this).parents("td").attr("class"),z=m=="tcl"?".topicpost":".endpost",f=/\?id=(\d+)/.exec(g)[1];c.find(".p-messages").empty();c.css({top:$(this).offset().top+$(this).height()+"px",left:$(this).offset().left-($(".punbb").css("position")=="relative"?$(".punbb").offset().left:0)+"px"}).stop(true,true).fadeIn(200,function(){c.find(".p-messages").html('<img src="https://forumstatic.ru/files/0015/c4/3f/79458.gif" alt="Loading"/>');if(!d[f+"-"+m]){$.get(g.replace(/&p=\d+.*$/,""),function(h){d[f+"-"+m]=(function(){var s=$(h).find(z).find(".post-content").clone();s.find(".post-sig,.lastedit").remove();return s.html()})(),b(f,m)})}else{b(f,m)}})}).on("mouseleave",a,function(){c.fadeOut(200)});c.mouseenter(function(){c.stop(true,true).show().mouseleave(function(){c.fadeOut(200)})})});
</script>
<!--//End//-Всплывающий текст последнего сообщения темы при наведении курсора-->
Alex_63
Yup, that new code works perfectly now in parent forms too. Thank you!
I had already amended your original code so that it applies to every viewtopic link in the forum, simply by modifying the array of selectors in the a= variable, like so:
a='.container .tcl a[href*="viewtopic"],.container .tcr a[href*="viewtopic"],.container #s-topics .t1 a[href*="viewtopic"],.container .post-sig a[href*="viewtopic"]';
That was easy, and it works everywhere in both left and right columns, including search results, post signatures, and the new smart title search feature you guys added to the admin scripts (love that one by the way!).
Got one last little tweak to get in there if possible. The script doesn't recognize viewtopic links on the /respect.php?id=n page, likely because the query string & topic ID are different. Everywhere else in the forum, viewtopic links appear in the html like so:
/viewtopic.php?id=2183#p7135
But on the /respect.php?id=n page(s), a link to that same topic#post appears like so:
/viewtopic.php?pid=7135#p7135
Is there a way we can get the script to also recognize those viewtopic.php?pid links too? I tried adding ?pid to the hrefs in the a= variable as above, but it doesn't look like query strings work there.
Added after 25 minutes 11 seconds:
Oops, just noticed I'm now getting that same loading spinner on the Users Online page at online.php where the code was working before. 
Looks like the only change in the latest code is:
function(){var g=!$(this).parents(".category,#f-subforums")...
What selector would need to be added/removed from there to get it working again in online.php , lol?
Last edited by Buzzer (2017-06-25 17:57:08)
Buzzer
Oops, just noticed I'm now getting that same loading spinner on the Users Online page at online.php where the code was working before.
Try this edited code:
<!-- Show preview of first post on hover over topic title -->
<div id="modal-m-first" class="m-message" style="display:none"><div class="main-container"><span class="p-messages-first"></span></div></div>
<script type="text/javascript">
$(function(){var e=$("#pun-main"),c=$("#modal-m-first"),d={},a='.container .tcl a[href*="viewtopic"],.container .tcr a[href*="viewtopic"],.container #s-topics .t1 a[href*="viewtopic"],.container .post-sig a[href*="viewtopic"]';if(!e.length){return}var b=function(f){if(!f||!d[f]){return}c.find(".p-messages-first").html(d[f])};$("body").on("mouseenter",a,function(){var g=!!$(this).attr("href").match(/\?pid=/)?$(this).parents("tr:first").find(".tcl a:first").attr("href"):$(this).attr("href");g=!!g.match(/viewtopic\./)?g:"";var f=/\?id=(\d+)/.exec(g)[1];c.find(".p-messages-first").empty();c.css({top:$(this).offset().top+$(this).height()+"px",left:$(this).offset().left-$(".punbb").offset().left+"px"}).stop(true,true).fadeIn(200,function(){c.find(".p-messages-first").html('<img src="https://forumstatic.ru/files/0015/c4/3f/79458.gif" alt="Loading"/>');if(!d[f]&&!!g){$.get(g.replace(/&p=\d+.*$/,""),function(h){d[f]=$(h).find(".topicpost").find(".postimg").slice(0,4).wrapAll("<div/>").parent().html(),b(f)})}else{b(f)}})}).on("mouseleave",a,function(){c.fadeOut(200)});c.mouseenter(function(){c.stop(true,true).show().mouseleave(function(){c.fadeOut(200)})})});
</script>
<!--//End//-Show preview of first post on hover over topic title-->
Is there a way we can get the script to also recognize those viewtopic.php?pid links too?
Unfortunately we can't get the content of topic's first post through the link with ?pid=. This link allows to get only the post that has the ID from ?pid=*** part of link.
Alex_63
Yay! That last code works perfectly everywhere now, thank you!
Unfortunately we can't get the content of topic's first post through the link with ?pid=.
Of course not, silly me, that's the post ID. My brain wasn't working yesterday. 
Last edited by Buzzer (2017-06-27 03:14:02)
Hi!
Is there any way to modify this script so the thumbnail will NOT appear when mouse hovering over "New posts" icon?
/Boavista
| Most liked posts | New Forum Features | 2017-07-04 |
You are here » Community Forum » New Forum Features » Get first image(s) of topic