twcsl/v7.1/Block/Image/Image Blocks Random/image blocks random.html at main · tomsWebConsulting/twcsl · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!--

  begin image blocks random

  License       : < https://tinyurl.com/s872fb68 >

  Version       : 0.1.0

  SS Version    : 7.1

  v7.1
  Fluid
  Engine
  Compatible    : Yes

  Dependencies  : jQuery

                  Fluid Engine

  Note          : the code is comprised of a style and script tag. both are
                  needed for the full effect to work

  By            : Thomas Creedon < http://www.tomsWeb.consulting/ >

  no user serviceable parts below

  -->

  <style>

    .twc-ibr--no-href {

      pointer-events : none;

      }

    </style>

  <script>

    $( ( ) => {

      debugger;

      const version = '0.1.0';

      const s = `Image Blocks Random v${ version }, ` +

        'License < https://tinyurl.com/s872fb68 >, ' +

        'Tom\'s Web Consulting < http://www.tomsWeb.consulting >';

      console.log ( s );

      const callback = function ( ) {

        const $this = $( this );

        let attribute = 'href';

        const href = $this

          .attr ( attribute )

          .replace ( `#${ codeKey }`, '' );

        const r = Math.floor ( Math.random ( ) * $images.length );

        const $image = $images.eq ( r );

        $this

          .append ( $image );

        $images = $images.not ( $image );

        if ( ! href ) {

          attribute += ' target';

          $this

          .removeAttr ( attribute )

          .addClass ( `${ codeKey }--no-href` );

          }

        }

      const codeKey = 'twc-ibr';

      const selectorPrefix = '.sqs-block-image .sqs-image .sqs-image-content ';

      const selectorSuffix = `[href*="#${ codeKey }"]`;

      const selector = `${ selectorPrefix }.` +

        [

          'content-fit',

          'content-fill'

          ]

          .join ( `${ selectorSuffix }, ${ selectorPrefix }.` )

        +

        selectorSuffix;

      const $elements = $( selector );

      let $images = $( 'img', $elements );

      $elements.each ( callback );

      } );

    </script>

  <!-- end image blocks random -->