FM Design
Would you like to react to this message? Create an account in a few clicks or log in to continue.

IMPORTANT

FM Design is in read-only mode, please click here for more information.

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

Recent Tutorials
Top posting users this month

Who is online?
In total there are 23 users online :: 0 Registered, 0 Hidden and 23 Guests :: 1 Bot

None

[ View the whole list ]


Most users ever online was 515 on Tue 14 Sep 2021, 15:24

Embed jQuery TwentyTwenty in the forum?

View previous topic View next topic Go down

Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Sun 25 Sep 2016, 07:33

How it could work on forumotion? Embed jQuery TwentyTwenty in the forum? 1428828476
http://zurb.com/playground/twentytwenty
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Wed 05 Oct 2016, 07:25

@Ange Tuteur Where are you? Embed jQuery TwentyTwenty in the forum? 1f602
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Wed 05 Oct 2016, 16:50

@Lorem I got you. You just want the double image thing right?

Just let me know where you want it at
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Wed 05 Oct 2016, 20:21

Ace 1 wrote:@Lorem I got you. You just want the double image thing right?

Just let me know where you want it at
Thank you Very Happy
I want it to appear in the post Embed jQuery TwentyTwenty in the forum? 1428828476
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Thu 06 Oct 2016, 07:22

Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Thu 06 Oct 2016, 08:05

Yes, this is my forum and I want it to appear in the topic Embed jQuery TwentyTwenty in the forum? 1428828476
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Fri 07 Oct 2016, 07:12

So how do you want people to enable it? By posting an image, selecting a SCEditor button?
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Fri 07 Oct 2016, 07:19

Ace 1 wrote:So how do you want people to enable it? By posting an image, selecting a SCEditor button?
Yes Huzzah
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Fri 07 Oct 2016, 20:12

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.

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.
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Fri 07 Oct 2016, 20:43

Wow!! It worked very well Embed jQuery TwentyTwenty in the forum? 1f60a
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 Embed jQuery TwentyTwenty in the forum? 1f618
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Fri 07 Oct 2016, 21:14

It worked Embed jQuery TwentyTwenty in the forum? 1f631

If there's any modifications you want, just let me knowww Embed jQuery TwentyTwenty in the forum? 1f499
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Fri 07 Oct 2016, 21:28

I want a little change Embed jQuery TwentyTwenty in the forum? 1f600

Embed jQuery TwentyTwenty in the forum? X4vQdnc
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Fri 07 Oct 2016, 21:34

Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Sun 09 Oct 2016, 20:32

@Ace 1 Can you help me? Embed jQuery TwentyTwenty in the forum? 1f60a
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Sun 09 Oct 2016, 23:14

oh really regret that it does not work Embed jQuery TwentyTwenty in the forum? 1f62d
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Sun 09 Oct 2016, 23:23

Hold on @Lorem give me another day Embed jQuery TwentyTwenty in the forum? 1f614
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Sun 09 Oct 2016, 23:25

Ace 1 wrote:Hold on @Lorem give me another day Embed jQuery TwentyTwenty in the forum? 1f614
I can wait, no problem Embed jQuery TwentyTwenty in the forum? 3413881353
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Tue 11 Oct 2016, 19:00

Sorry for the late reply..

Lorem wrote:I want a little change Embed jQuery TwentyTwenty in the forum? 1f600

Embed jQuery TwentyTwenty in the forum? X4vQdnc

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
Code:
'Before'
and
Code:
'After'
to what you want.

Lorem wrote:And it does not work here Embed jQuery TwentyTwenty in the forum? 1f62d : http://www.forumgiaitri.net/tags/camera

@Ace 1

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
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Tue 11 Oct 2016, 20:29

@Ace 1 Thank you, but it still does not work Embed jQuery TwentyTwenty in the forum? 1f602
Ace 1
Ace 1
Valued Member
Gender : Unspecified
Age : 24
Posts : 2153
Points : 5289
Reputation : 95
Location : USA
Language : English ?
Browser : Browser : Google Chrome Forum Version : Forum Version : phpBB3
https://fmdesign.forumotion.com/u190

PostAce 1 Wed 12 Oct 2016, 11:11

Oh @Lorem I had a small problem with my JavaScript. It's good now.
Lorem
Lorem

Gender : Male
Age : 25
Posts : 75
Points : 3025
Reputation : 14
Location : Vietnam
Language : English, Vietnamese
Browser : Browser : Google Chrome Forum Version : Forum Version : Invision
http://www.forumgiaitri.net/ https://www.facebook.com/ForumGiaiTri https://twitter.com/forumgiaitri https://pinterest.com/forumgiaitri

PostLorem Wed 12 Oct 2016, 11:26

Ace 1 wrote:Oh @Lorem I had a small problem with my JavaScript. It's good now.
It not work again Embed jQuery TwentyTwenty in the forum? 1f62d
maybe I'll use this way https://fmdesign.forumotion.com/t1048-embed-jquery-twentytwenty-in-the-forum#23022
Sponsored content

PostSponsored content

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum