Latest topics
» Forumactif Edge - Releases
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
by Ange Tuteur Tue 03 Sep 2019, 11:49
» GIFActif - Giphy Button for the Editor
by Ange Tuteur Wed 08 May 2019, 17:21
» Forum Closure
by Ange Tuteur Mon 01 Jan 2018, 01:28
» Chit Chat Thread
by Valoish Sun 31 Dec 2017, 19:15
» Font/Text background color.
by Valoish Sun 31 Dec 2017, 19:11
» Forumactif Messenger - Instant Message Application for Forumotion
by Wolfuryo Sun 31 Dec 2017, 18:24
» [GAME] Count to One Million!
by brandon_g Fri 29 Dec 2017, 18:58
» Post Cards
by manikbiradar Wed 20 Dec 2017, 07:50
» [GAME] Countdown from 200,000
by Valoish Wed 13 Dec 2017, 23:22
» GeekPolice Tech Support Forums - GeekPolice.net
by Dr Jay Mon 11 Dec 2017, 19:12
» Asking about some plugin for Forumotion
by Dr Jay Mon 11 Dec 2017, 19:10
» [GAME] What are you thinking right now?
by Van-Helsing Sat 09 Dec 2017, 14:51
» Widget : Similar topics
by ranbac Wed 06 Dec 2017, 18:11
» Change the Background of the Forum and put an image and how to make prefixs?
by Clement Wed 06 Dec 2017, 15:19
» Hello from Western Australia
by SarkZKalie Wed 06 Dec 2017, 05:34
Recent Tutorials
Top posting users this month
Top Achievers
Who is online?
In total there are 23 users online :: 0 Registered, 0 Hidden and 23 Guests :: 1 Bot
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
None
Most users ever online was 515 on Tue 14 Sep 2021, 15:24
Embed jQuery TwentyTwenty in the forum?
Page 1 of 1 • Share
Thank youAce 1 wrote:@Lorem I got you. You just want the double image thing right?
Just let me know where you want it at
I want it to appear in the post
Well, @Lorem this is all I could come up with. Since you have Invision, I don't know if this'll work. Let me know what you get.
Administration Panel > Display > Templates > General > viewtopic_body
Add this at the top:
Administration Panel > Modules > HTML & Javascript > Javascript codes management > Create new javascript
Title: TwentyTwenty
Placement: In all the pages
Code:
I really hope this works. Let me know whatever you want fixed.
TwentyTwenty Installation
Administration Panel > Display > Templates > General > viewtopic_body
Add this at the top:
- Code:
<!-- CSS 2020 -->
<link type="text/css" rel="stylesheet" href="http://codepen.io/therealace_1/pen/rrJpav.css" />
<!-- jQuery Move Event -->
<script src="http://codepen.io/therealace_1/pen/yavpZj.js" type="text/javascript"></script>
<!-- jQuery 2020 -->
<script src="http://codepen.io/therealace_1/pen/LRQZGw.js" type="text/javascript"></script>
Creating the Javascripts
Administration Panel > Modules > HTML & Javascript > Javascript codes management > Create new javascript
Title: TwentyTwenty
Placement: In all the pages
Code:
- Code:
$(function() {
if ( /\/t\d+/.test(window.location.href) ) {
$('.post [class*="content"]').each(function() {
if ( $(this).find('.twentytwenty img').html() != undefined ) {
$(this).find('.twentytwenty img').each(function() {
if ( $(this).next().prop('tagName') == 'IMG' ) {
$(this).next().andSelf().wrapAll('<div class="2020"></div>');
}
});
$('.2020').unwrap('td').unwrap('tr').unwrap('tbody').unwrap('table').twentytwenty();
}
});
}
if ( $.sceditor ) {
$.sceditor.command.set('twentytwenty', {
exec: function() {
this.insert('[table class="twentytwenty"][tr][td][img]', '[/img][img]Image 2 Here[/img][/td][/tr][/table]');
},
txtExec: function() {
this.insert('[table class="twentytwenty"][tr][td][img]', '[/img][img]Image 2 Here[/img][/td][/tr][/table]');
},
tooltip: '2020'
});
toolbar = toolbar.replace(/image/, 'image,twentytwenty');
$('head').append(
'<style type="text/css">' +
'.sceditor-button-twentytwenty div {' +
'background-size: cover;' +
'background-image: url("https://i.imgsafe.org/823ece71a9.gif") !important;' +
'}' +
'</style>');
}
});
I really hope this works. Let me know whatever you want fixed.
Wow!! It worked very well
You can view it here: http://www.forumgiaitri.net/t5883-so-sanh-anh-chup-tu-camera-cua-iphone-7-plus-va-galaxy-s7#9486
Thank you very much on this issue
You can view it here: http://www.forumgiaitri.net/t5883-so-sanh-anh-chup-tu-camera-cua-iphone-7-plus-va-galaxy-s7#9486
Thank you very much on this issue
Sorry for the late reply..
For this, just go to Display > Colors > CSS Stylesheet and add this:
Change the
and
to what you want.
And for that, just replace my Javascript with this:
And you can actually remove the stuff I told you to place in your viewtopic_body template.
Lorem wrote:I want a little change
For this, just go to Display > Colors > CSS Stylesheet and add this:
- Code:
.twentytwenty-before-label:before { content: 'Before'; }
.twentytwenty-after-label:before { content: 'After'; }
Change the
|
|
And for that, just replace my Javascript with this:
- Code:
$(function() {
if ( /\/t\d+/.test(window.location.href) || /\/tags/.test(window.location.href) ) {
$('[class*="post"] [class*="content"]').each(function() {
if ( $(this).find('.twentytwenty img').html() != undefined ) {
$(this).find('.twentytwenty img').each(function() {
if ( $(this).next().prop('tagName') == 'IMG' ) {
$(this).next().andSelf().wrapAll('<div class="2020"></div>');
}
});
$('.2020').unwrap('td').unwrap('tr').unwrap('tbody').unwrap('table').twentytwenty();
}
});
}
if ( $.sceditor ) {
$.sceditor.command.set('twentytwenty', {
exec: function() {
this.insert('[table class="twentytwenty"][tr][td][img]', '[/img][img]Image 2 Here[/img][/td][/tr][/table]');
},
txtExec: function() {
this.insert('[table class="twentytwenty"][tr][td][img]', '[/img][img]Image 2 Here[/img][/td][/tr][/table]');
},
tooltip: '2020'
});
toolbar = toolbar.replace(/image/, 'image,twentytwenty');
$('head').append(
'<style type="text/css">' +
'.sceditor-button-twentytwenty div {' +
'background-size: cover;' +
'background-image: url("https://i.imgsafe.org/823ece71a9.gif") !important;' +
'}' +
'</style>');
}
$('head').append(
'<!-- CSS 2020 -->' +
'<link type="text/css" rel="stylesheet" href="http://codepen.io/therealace_1/pen/rrJpav.css" />' +
'<!-- jQuery Move Event -->' +
'<script src="http://codepen.io/therealace_1/pen/yavpZj.js" type="text/javascript"></script>' +
'<!-- jQuery 2020 -->' +
'<script src="http://codepen.io/therealace_1/pen/LRQZGw.js" type="text/javascript"></script>'
);
});
And you can actually remove the stuff I told you to place in your viewtopic_body template.
Last edited by Ace 1 on Wed 12 Oct 2016, 11:10; edited 1 time in total
It not work againAce 1 wrote:Oh @Lorem I had a small problem with my JavaScript. It's good now.
maybe I'll use this way https://fmdesign.forumotion.com/t1048-embed-jquery-twentytwenty-in-the-forum#23022
- Sponsored content
Similar topics
Create an account or log in to leave a reply
You need to be a member in order to leave a reply.
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum
|
|