Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: you know that it's origina

was launched during 2002 inside Denmark and entered the us market a year after. One of the company's most innovative products is the patented Pandora elegance bracelet. You can make your individual bracelet online using realistic Pandora beads. Find a website and get started. Begin by choosing a Pandora bracelet, either $50 for the bead clasp, or $35 for any lobster clasp. The bracelets are constructed with 14 karat gold, metalic or oxidized silver. After you have your bracelet you can start selecting beads and charms from hundreds of choices.
Every chain has threaded areas that try to portion the chain. The raised section will prevent beads rolling to another area of the bracelet. The are kept in location with clips and threads which can not be seen. Once you are proud of the design you can certainly place your order. They're perfect gifts and, using the huge selection of charms and beads, you may establish a bracelet that reflects the personality from the person you are providing it to. For example in case your friend loves animals, you can create an enchanting bracelet with lots of beautiful animal beads just like hedgehogs, ladybirds, swans, cats, donkeys - the alternatives are endless.
You also can create a bracelet to mark a unique occasion like the birth of any baby. The bracelet could feature babyish beads such while prams, bottles, cribs and the like. If your friend is into shopping you'll be able to create a bracelet by using a shopping bag bead that has a donut and a coffee cup to increase an appropriate touch. Another idea is to create a bracelet and spell available your friend's name around bead letters. Or put your name over a bracelet and give it to someone you love. Many couples create a pair of identical bracelets that element both their names and a few hearts. This would be a lovely Valentine's day gift. You can also receive pretty colored glass beads that are available in many objects as well as shapes, and Pandora's drop-down beans are exquisite. It is so enjoyable when people make their bracelets because no a couple of are alike. So once you create your bracelet, you know that it's original! Before your beads you must be sure that they are genuine. There are many fake beads on industry which are being sold at prices above genuine beads. Remember every one authentic Pandora beads contain the brand name on the bead's inner ring.
Ответ:
бот?
Вопрос: Check the manual that corresponds to your MySQL server version for the right syntax to use near

вообщем создал БД и пользователя, начинаю устанавливать Jooml и на 4 шаги установки(база данных) выдает вот такое
You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near 'TYPE=MyISAM CHARACTER SET `utf8`' at line 29 SQL=CREATE TABLE `jos_banner` ( `bid` int(11) NOT NULL auto_increment, `cid` int(11) NOT NULL default '0', `type` varchar(30) NOT NULL default 'banner', `name` varchar(255) NOT NULL default '', `alias` varchar(255) NOT NULL default '', `imptotal` int(11) NOT NULL default '0', `impmade` int(11) NOT NULL default '0', `clicks` int(11) NOT NULL default '0', `imageurl` varchar(100) NOT NULL default '', `clickurl` varchar(200) NOT NULL default '', `date` datetime default NULL, `showBanner` tinyint(1) NOT NULL default '0', `checked_out` tinyint(1) NOT NULL default '0', `checked_out_time` datetime NOT NULL default '0000-00-00 00:00:00', `editor` varchar(50) default NULL, `custombannercode` text, `catid` INTEGER UNSIGNED NOT NULL DEFAULT 0, `description` TEXT NOT NULL DEFAULT '', `sticky` TINYINT(1) UNSIGNED NOT NULL DEFAULT 0, `ordering` INTEGER NOT NULL DEFAULT 0, `publish_up` datetime NOT NULL default '0000-00-00 00:00:00', `publish_down` datetime NOT NULL default '0000-00-00 00:00:00', `tags` TEXT NOT NULL DEFAULT '', `params` TEXT NOT NULL DEFAULT '', PRIMARY KEY (`bid`), KEY `viewbanner` (`showBanner`), INDEX `idx_banner_catid`(`catid`) ) TYPE=MyISAM CHARACTER SET `utf8`
Как это исправить и что это такое?
Ответ:

Прекратите маяться не тем, чем надо. Ставьте тройку.

Добавлено через 1 минуту
Сообщение от dimaga91
Как это исправить и что это такое?
База данных на хостинге не подходит для версии 1.5 - слишком современная.
Вопрос: SSL 404 Not found

Привет, программистам и сисадминам!
Настраивал SSL сертификат на сайте, вроде бы прописал в настройках всё, как в инструкции, но на выходе получаю от апача 404 not found при запросах.
Может всё-таки что-то не доглядел?

Ответ от apache:
Not Found
The requested URL [my url...] was not found on this server.
Apache/2.2.22 (Ubuntu) Server at nice-host.ru Port 443

Текст настройки (файл default-ssl) прикрепляю:
XML
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
<IfModule mod_ssl.c>
<VirtualHost *:443>
    ServerAdmin webmaster@localhost
 
    DocumentRoot /var/www
    <Directory />
        Options FollowSymLinks
        AllowOverride None
    </Directory>
    <Directory /var/www/>
        Options Indexes FollowSymLinks MultiViews
        AllowOverride None
        Order allow,deny
        allow from all
    </Directory>
 
    ScriptAlias /cgi-bin/ /usr/lib/cgi-bin/
    <Directory "/usr/lib/cgi-bin">
        AllowOverride None
        Options +ExecCGI -MultiViews +SymLinksIfOwnerMatch
        Order allow,deny
        Allow from all
    </Directory>
 
    ErrorLog ${APACHE_LOG_DIR}/error.log
 
    # Possible values include: debug, info, notice, warn, error, crit,
    # alert, emerg.
    LogLevel warn
 
    CustomLog ${APACHE_LOG_DIR}/ssl_access.log combined
 
    Alias /doc/ "/usr/share/doc/"
    <Directory "/usr/share/doc/">
        Options Indexes MultiViews FollowSymLinks
        AllowOverride None
        Order deny,allow
        Deny from all
        Allow from 127.0.0.0/255.0.0.0 ::1/128
    </Directory>
 
    #   SSL Engine Switch:
    #   Enable/Disable SSL for this virtual host.
    SSLEngine on
    SSLProtocol all -SSLv2 -SSLv3
    SSLCertificateFile /etc/apache2/path/to/domain_name.crt
    SSLCertificateKeyFile /etc/apache2/path/to/private.key 
    SSLCertificateChainFile /etc/apache2/path/to/chain.crt
 
    #   A self-signed (snakeoil) certificate can be created by installing
    #   the ssl-cert package. See
    #   /usr/share/doc/apache2.2-common/README.Debian.gz for more info.
    #   If both key and certificate are stored in the same file, only the
    #   SSLCertificateFile directive is needed.
    #SSLCertificateFile    /etc/ssl/certs/ssl-cert-snakeoil.pem
    #SSLCertificateKeyFile /etc/ssl/private/ssl-cert-snakeoil.key
 
    #   Server Certificate Chain:
    #   Point SSLCertificateChainFile at a file containing the
    #   concatenation of PEM encoded CA certificates which form the
    #   certificate chain for the server certificate. Alternatively
    #   the referenced file can be the same as SSLCertificateFile
    #   when the CA certificates are directly appended to the server
    #   certificate for convinience.
    #SSLCertificateChainFile /etc/apache2/ssl.crt/server-ca.crt
 
    #   Certificate Authority (CA):
    #   Set the CA certificate verification path where to find CA
    #   certificates for client authentication or alternatively one
    #   huge file containing all of them (file must be PEM encoded)
    #   Note: Inside SSLCACertificatePath you need hash symlinks
    #         to point to the certificate files. Use the provided
    #         Makefile to update the hash symlinks after changes.
    #SSLCACertificatePath /etc/ssl/certs/
    #SSLCACertificateFile /etc/apache2/ssl.crt/ca-bundle.crt
 
    #   Certificate Revocation Lists (CRL):
    #   Set the CA revocation path where to find CA CRLs for client
    #   authentication or alternatively one huge file containing all
    #   of them (file must be PEM encoded)
    #   Note: Inside SSLCARevocationPath you need hash symlinks
    #         to point to the certificate files. Use the provided
    #         Makefile to update the hash symlinks after changes.
    #SSLCARevocationPath /etc/apache2/ssl.crl/
    #SSLCARevocationFile /etc/apache2/ssl.crl/ca-bundle.crl
 
    #   Client Authentication (Type):
    #   Client certificate verification type and depth.  Types are
    #   none, optional, require and optional_no_ca.  Depth is a
    #   number which specifies how deeply to verify the certificate
    #   issuer chain before deciding the certificate is not valid.
    #SSLVerifyClient require
    #SSLVerifyDepth  10
 
    #   Access Control:
    #   With SSLRequire you can do per-directory access control based
    #   on arbitrary complex boolean expressions containing server
    #   variable checks and other lookup directives.  The syntax is a
    #   mixture between C and Perl.  See the mod_ssl documentation
    #   for more details.
    #<Location />
    #SSLRequire (    %{SSL_CIPHER} !~ m/^(EXP|NULL)/ \
    #            and %{SSL_CLIENT_S_DN_O} eq "Snake Oil, Ltd." \
    #            and %{SSL_CLIENT_S_DN_OU} in {"Staff", "CA", "Dev"} \
    #            and %{TIME_WDAY} >= 1 and %{TIME_WDAY} <= 5 \
    #            and %{TIME_HOUR} >= 8 and %{TIME_HOUR} <= 20       ) \
    #           or %{REMOTE_ADDR} =~ m/^192\.76\.162\.[0-9]+$/
    #</Location>
 
    #   SSL Engine Options:
    #   Set various options for the SSL engine.
    #   o FakeBasicAuth:
    #     Translate the client X.509 into a Basic Authorisation.  This means that
    #     the standard Auth/DBMAuth methods can be used for access control.  The
    #     user name is the `one line' version of the client's X.509 certificate.
    #     Note that no password is obtained from the user. Every entry in the user
    #     file needs this password: `xxj31ZMTZzkVA'.
    #   o ExportCertData:
    #     This exports two additional environment variables: SSL_CLIENT_CERT and
    #     SSL_SERVER_CERT. These contain the PEM-encoded certificates of the
    #     server (always existing) and the client (only existing when client
    #     authentication is used). This can be used to import the certificates
    #     into CGI scripts.
    #   o StdEnvVars:
    #     This exports the standard SSL/TLS related `SSL_*' environment variables.
    #     Per default this exportation is switched off for performance reasons,
    #     because the extraction step is an expensive operation and is usually
    #     useless for serving static content. So one usually enables the
    #     exportation for CGI and SSI requests only.
    #   o StrictRequire:
    #     This denies access when "SSLRequireSSL" or "SSLRequire" applied even
    #     under a "Satisfy any" situation, i.e. when it applies access is denied
    #     and no other module can change it.
    #   o OptRenegotiate:
    #     This enables optimized SSL connection renegotiation handling when SSL
    #     directives are used in per-directory context.
    #SSLOptions +FakeBasicAuth +ExportCertData +StrictRequire
    <FilesMatch "\.(cgi|shtml|phtml|php)$">
        SSLOptions +StdEnvVars
    </FilesMatch>
    <Directory /usr/lib/cgi-bin>
        SSLOptions +StdEnvVars
    </Directory>
 
    #   SSL Protocol Adjustments:
    #   The safe and default but still SSL/TLS standard compliant shutdown
    #   approach is that mod_ssl sends the close notify alert but doesn't wait for
    #   the close notify alert from client. When you need a different shutdown
    #   approach you can use one of the following variables:
    #   o ssl-unclean-shutdown:
    #     This forces an unclean shutdown when the connection is closed, i.e. no
    #     SSL close notify alert is send or allowed to received.  This violates
    #     the SSL/TLS standard but is needed for some brain-dead browsers. Use
    #     this when you receive I/O errors because of the standard approach where
    #     mod_ssl sends the close notify alert.
    #   o ssl-accurate-shutdown:
    #     This forces an accurate shutdown when the connection is closed, i.e. a
    #     SSL close notify alert is send and mod_ssl waits for the close notify
    #     alert of the client. This is 100% SSL/TLS standard compliant, but in
    #     practice often causes hanging connections with brain-dead browsers. Use
    #     this only for browsers where you know that their SSL implementation
    #     works correctly.
    #   Notice: Most problems of broken clients are also related to the HTTP
    #   keep-alive facility, so you usually additionally want to disable
    #   keep-alive for those clients, too. Use variable "nokeepalive" for this.
    #   Similarly, one has to force some clients to use HTTP/1.0 to workaround
    #   their broken HTTP/1.1 implementation. Use variables "downgrade-1.0" and
    #   "force-response-1.0" for this.
    BrowserMatch "MSIE [2-6]" \
        nokeepalive ssl-unclean-shutdown \
        downgrade-1.0 force-response-1.0
    # MSIE 7 and newer should be able to use keepalive
    BrowserMatch "MSIE [17-9]" ssl-unclean-shutdown
 
</VirtualHost>
</IfModule>
Ответ: mano, я так понимаю SSL здесь не причем. просто документ запрашиваемый не найден
завтра посмотрю как у меня настроено и напишу, если актуально еще
Вопрос: Добавление видео в superslides

Установил на сайт слайдер superslides, но не получается добавить в него видео, отображает только картинки. Пробовал просто добавить в массив расширение видео. Слайд новый добавляется, но видео не отображается. Есть ли другой способ добавить видео в данный слайдер?

HTML5
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
<div id="slides">
  <ul class="slides-container">
 
    <?php
    $directory = 'slider/'; //название папки с изображениями
    $allowed_types=array('jpg','jpeg','gif','png'); //разрешеные типы изображений
    $file_parts=array();
      $ext='';
      $title='';
      $i=0;
    //пробуем открыть папку
      $dir_handle = @opendir($directory) or die("There is an error with your image directory!");
    while ($file = readdir($dir_handle))  //поиск по файлам
      {
        if($file=='.' || $file == '..') continue; //пропустить ссылки на другие папки
        $file_parts = explode('.',$file); //разделить имя файла и поместить его в массив
        $ext = strtolower(array_pop($file_parts));  //последний элеменет - это расширение
        if (in_array($ext,$allowed_types)) 
        {
          echo '
          <li>
            <img src="'.$directory.'/'.$file.'" alt="">
          </li>';
          $i++;
        }
      }
    closedir($dir_handle);  //закрыть папку
    ?>
  </ul>
</div>
</div>
Javascript
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
(function(window, $) {
 
var Superslides, plugin = 'superslides';
 
Superslides = function(el, options) {
  this.options = $.extend({
    play: false,
    animation_speed: 600,
    animation_easing: 'swing',
    animation: 'slide',
    inherit_width_from: window,
    inherit_height_from: window,
    pagination: true,
    hashchange: false,
    scrollable: true,
    elements: {
      preserve: '.preserve',
      nav: '.slides-navigation',
      container: '.slides-container',
      pagination: '.slides-pagination'
    }
  }, options);
 
  var that       = this,
      $control   = $('<div>', { "class": 'slides-control' }),
      multiplier = 1;
 
  this.$el        = $(el);
  this.$container = this.$el.find(this.options.elements.container);
 
  // Private Methods
  var initialize = function() {
    multiplier = that._findMultiplier();
 
    that.$el.on('click', that.options.elements.nav + " a", function(e) {
      e.preventDefault();
 
      that.stop();
      if ($(this).hasClass('next')) {
        that.animate('next', function() {
          that.start();
        });
      } else {
        that.animate('prev', function() {
          that.start();
        });
      }
    });
 
    $(document).on('keyup', function(e) {
      if (e.keyCode === 37) {
        that.animate('prev');
      }
      if (e.keyCode === 39) {
        that.animate('next');
      }
    });
 
    $(window).on('resize', function() {
      setTimeout(function() {
        var $children = that.$container.children();
 
        that.width  = that._findWidth();
        that.height = that._findHeight();
 
        $children.css({
          width: that.width,
          left: that.width
        });
 
        that.css.containers();
        that.css.images();
      }, 10);
    });
 
    $(window).on('hashchange', function() {
      var hash = that._parseHash(), index;
 
      if (hash && !isNaN(hash)) {
        // Minus 1 here because we don't want the url
        // to be zero-indexed
        index = that._upcomingSlide(hash - 1);
 
      } else {
        index = that._upcomingSlide(hash);
      }
 
      if (index >= 0 && index !== that.current) {
        that.animate(index);
      }
    });
 
    that.pagination._events();
 
    that.start();
    return that;
  };
 
var css = {
  containers: function() {
    if (that.init) {
      that.$el.css({
        height: that.height
      });
 
      that.$control.css({
        width: that.width * multiplier,
        left: -that.width
      });
 
      that.$container.css({
 
      });
    } else {
      $('body').css({
        margin: 0
      });
 
      that.$el.css({
        position: 'relative',
        overflow: 'hidden',
        width: '100%',
        height: that.height
      });
 
      that.$control.css({
        position: 'relative',
        transform: 'translate3d(0)',
        height: '100%',
        width: that.width * multiplier,
        left: -that.width
      });
 
      that.$container.css({
        display: 'none',
        margin: '0',
        padding: '0',
        listStyle: 'none',
        position: 'relative',
        height: '100%'
      });
    }
 
    if (that.size() === 1) {
      that.$el.find(that.options.elements.nav).hide();
    }
  },
  images: function() {
    var $images = that.$container.find('img')
                                 .not(that.options.elements.preserve)
 
    $images.removeAttr('width').removeAttr('height')
      .css({
        "-webkit-backface-visibility": 'hidden',
        "-ms-interpolation-mode": 'bicubic',
        "position": 'absolute',
        "left": '0',
        "top": '0',
        "z-index": '-1',
        "max-width": 'none'
      });
 
    $images.each(function() {
      var image_aspect_ratio = that.image._aspectRatio(this),
          image = this;
 
      if (!$.data(this, 'processed')) {
        var img = new Image();
        img.onload = function() {
          that.image._scale(image, image_aspect_ratio);
          that.image._center(image, image_aspect_ratio);
          $.data(image, 'processed', true);
        };
        img.src = this.src;
 
      } else {
        that.image._scale(image, image_aspect_ratio);
        that.image._center(image, image_aspect_ratio);
      }
    });
  },
  children: function() {
    var $children = that.$container.children();
 
    if ($children.is('img')) {
      $children.each(function() {
        if ($(this).is('img')) {
          $(this).wrap('<div>');
 
          // move id attribute
          var id = $(this).attr('id');
          $(this).removeAttr('id');
          $(this).parent().attr('id', id);
        }
      });
 
      $children = that.$container.children();
    }
 
    if (!that.init) {
      $children.css({
        display: 'none',
        left: that.width * 2
      });
    }
 
    $children.css({
      position: 'absolute',
      overflow: 'hidden',
      height: '100%',
      width: that.width,
      top: 0,
      zIndex: 0
    });
 
  }
}
 
var fx = {
  slide: function(orientation, complete) {
    var $children = that.$container.children(),
        $target   = $children.eq(orientation.upcoming_slide);
 
    $target.css({
      left: orientation.upcoming_position,
      display: 'block'
    });
 
    that.$control.animate({
      left: orientation.offset
    },
    that.options.animation_speed,
    that.options.animation_easing,
    function() {
      if (that.size() > 1) {
        that.$control.css({
          left: -that.width
        });
 
        $children.eq(orientation.upcoming_slide).css({
          left: that.width,
          zIndex: 2
        });
 
        if (orientation.outgoing_slide >= 0) {
          $children.eq(orientation.outgoing_slide).css({
            left: that.width,
            display: 'none',
            zIndex: 0
          });
        }
      }
 
      complete();
    });
  },
  fade: function(orientation, complete) {
    var that = this,
        $children = that.$container.children(),
        $outgoing = $children.eq(orientation.outgoing_slide),
        $target = $children.eq(orientation.upcoming_slide);
 
    $target.css({
      left: this.width,
      opacity: 1,
      display: 'block'
    });
 
    if (orientation.outgoing_slide >= 0) {
      $outgoing.animate({
        opacity: 0
      },
      that.options.animation_speed,
      that.options.animation_easing,
      function() {
        if (that.size() > 1) {
          $children.eq(orientation.upcoming_slide).css({
            zIndex: 2
          });
 
          if (orientation.outgoing_slide >= 0) {
            $children.eq(orientation.outgoing_slide).css({
              opacity: 1,
              display: 'none',
              zIndex: 0
            });
          }
        }
 
        complete();
      });
    } else {
      $target.css({
        zIndex: 2
      });
      complete();
    }
  }
};
 
fx = $.extend(fx, $.fn.superslides.fx);
 
var image = {
  _centerY: function(image) {
    var $img = $(image);
 
    $img.css({
      top: (that.height - $img.height()) / 2
    });
  },
  _centerX: function(image) {
    var $img = $(image);
 
    $img.css({
      left: (that.width - $img.width()) / 2
    });
  },
  _center: function(image) {
    that.image._centerX(image);
    that.image._centerY(image);
  },
  _aspectRatio: function(image) {
    if (!image.naturalHeight && !image.naturalWidth) {
      var img = new Image();
      img.src = image.src;
      image.naturalHeight = img.height;
      image.naturalWidth = img.width;
    }
 
    return image.naturalHeight / image.naturalWidth;
  },
  _scale: function(image, image_aspect_ratio) {
    image_aspect_ratio = image_aspect_ratio || that.image._aspectRatio(image);
 
    var container_aspect_ratio = that.height / that.width,
        $img = $(image);
 
    if (container_aspect_ratio > image_aspect_ratio) {
      $img.css({
        height: that.height,
        width: that.height / image_aspect_ratio
      });
 
    } else {
      $img.css({
        height: that.width * image_aspect_ratio,
        width: that.width
      });
    }
  }
};
 
var pagination = {
  _setCurrent: function(i) {
    if (!that.$pagination) { return; }
 
    var $pagination_children = that.$pagination.children();
 
    $pagination_children.removeClass('current');
    $pagination_children.eq(i)
      .addClass('current');
  },
  _addItem: function(i) {
    var slide_number = i + 1,
        href = slide_number,
        $slide = that.$container.children().eq(i),
        slide_id = $slide.attr('id');
 
    if (slide_id) {
      href = slide_id;
    }
 
    var $item = $("<a>", {
      'href': "#" + href,
      'text': href
    });
 
    $item.appendTo(that.$pagination);
  },
  _setup: function() {
    if (!that.options.pagination || that.size() === 1) { return; }
 
    var $pagination = $("<nav>", {
      'class': that.options.elements.pagination.replace(/^\./, '')
    });
 
    that.$pagination = $pagination.appendTo(that.$el);
 
    for (var i = 0; i < that.size(); i++) {
      that.pagination._addItem(i);
    }
  },
  _events: function() {
    that.$el.on('click', that.options.elements.pagination + ' a', function(e) {
      e.preventDefault();
 
      var hash  = that._parseHash(this.hash),
          index = that._upcomingSlide(hash - 1);
 
      if (index !== that.current) {
        that.animate(index, function() {
          that.start();
        });
      }
    });
  }
};
 
  this.css = css;
  this.image = image;
  this.pagination = pagination;
  this.fx = fx;
  this.animation = this.fx[this.options.animation];
 
  this.$control = this.$container.wrap($control).parent('.slides-control');
 
  that._findPositions();
  that.width  = that._findWidth();
  that.height = that._findHeight();
 
  this.css.children();
  this.css.containers();
  this.css.images();
  this.pagination._setup();
 
  return initialize();
};
 
Superslides.prototype = {
  _findWidth: function() {
    return $(this.options.inherit_width_from).width();
  },
  _findHeight: function() {
    return $(this.options.inherit_height_from).height();
  },
 
  _findMultiplier: function() {
    return this.size() === 1 ? 1 : 3;
  },
 
  _upcomingSlide: function(direction) {
    if ((/next/).test(direction)) {
      return this._nextInDom();
 
    } else if ((/prev/).test(direction)) {
      return this._prevInDom();
 
    } else if ((/\d/).test(direction)) {
      return +direction;
 
    } else if (direction && (/\w/).test(direction)) {
      var index = this._findSlideById(direction);
      if (index >= 0) {
        return index;
      } else {
        return 0;
      }
 
    } else {
      return 0;
    }
  },
 
  _findSlideById: function(id) {
    return this.$container.find('#' + id).index();
  },
 
  _findPositions: function(current, thisRef) {
    thisRef = thisRef || this;
 
    if (current === undefined) {
      current = -1;
    }
 
    thisRef.current = current;
    thisRef.next    = thisRef._nextInDom();
    thisRef.prev    = thisRef._prevInDom();
  },
 
  _nextInDom: function() {
    var index = this.current + 1;
 
    if (index === this.size()) {
      index = 0;
    }
 
    return index;
  },
 
  _prevInDom: function() {
    var index = this.current - 1;
 
    if (index < 0) {
      index = this.size() - 1;
    }
 
    return index;
  },
 
  _parseHash: function(hash) {
    hash = hash || window.location.hash;
    hash = hash.replace(/^#/, '');
 
    if (hash && !isNaN(+hash)) {
      hash = +hash;
    }
 
    return hash;
  },
 
  size: function() {
    return this.$container.children().length;
  },
 
  destroy: function() {
    return this.$el.removeData();
  },
Ответ: Продолжение js скрипта
Javascript
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
124
125
126
127
128
129
130
131
132
133
134
  update: function() {
    this.css.children();
    this.css.containers();
    this.css.images();
 
    this.pagination._addItem(this.size())
 
    this._findPositions(this.current);
    this.$el.trigger('updated.slides');
  },
 
  stop: function() {
    clearInterval(this.play_id);
    delete this.play_id;
 
    this.$el.trigger('stopped.slides');
  },
 
  start: function() {
    var that = this;
 
    if (that.options.hashchange) {
      $(window).trigger('hashchange');
    } else {
      this.animate();
    }
 
    if (this.options.play) {
      if (this.play_id) {
        this.stop();
      }
 
      this.play_id = setInterval(function() {
        that.animate();
      }, this.options.play);
    }
 
    this.$el.trigger('started.slides');
  },
 
  animate: function(direction, userCallback) {
    var that = this,
        orientation = {};
 
    if (this.animating) {
      return;
    }
 
    this.animating = true;
 
    if (direction === undefined) {
      direction = 'next';
    }
 
    orientation.upcoming_slide = this._upcomingSlide(direction);
 
    if (orientation.upcoming_slide >= this.size()) {
      return;
    }
 
    orientation.outgoing_slide    = this.current;
    orientation.upcoming_position = this.width * 2;
    orientation.offset            = -orientation.upcoming_position;
 
    if (direction === 'prev' || direction < orientation.outgoing_slide) {
      orientation.upcoming_position = 0;
      orientation.offset            = 0;
    }
 
    if (that.size() > 1) {
      that.pagination._setCurrent(orientation.upcoming_slide);
    }
 
    if (that.options.hashchange) {
      var hash = orientation.upcoming_slide + 1,
          id = that.$container.children(':eq(' + orientation.upcoming_slide + ')').attr('id');
 
      if (id) {
        window.location.hash = id;
      } else {
        window.location.hash = hash;
      }
    }
 
    that.$el.trigger('animating.slides', [orientation]);
 
    that.animation(orientation, function() {
      that._findPositions(orientation.upcoming_slide, that);
 
      if (typeof userCallback === 'function') {
        userCallback();
      }
 
      that.animating = false;
      that.$el.trigger('animated.slides');
 
      if (!that.init) {
        that.$el.trigger('init.slides');
        that.init = true;
        that.$container.fadeIn('fast');
      }
    });
  }
};
 
 
$.fn[plugin] = function(option, args) {
  var result = [];
 
  this.each(function() {
    var $this, data, options;
 
    $this = $(this);
    data = $this.data(plugin);
    options = typeof option === 'object' && option;
 
    if (!data) {
      result = $this.data(plugin, (data = new Superslides(this, options)));
    }
 
    if (typeof option === "string") {
      result = data[option];
      if (typeof result === 'function') {
        return result = result.call(data, args);
      }
    }
  });
 
  return result;
};
 
$.fn[plugin].fx = {};
 
})(this, jQuery);
Вопрос: Очередная загвоздка с автоматической прокруткой слайдера - JavaScript

День добрый. Не разбираюсь в JavaScript, скачал шаблон HTML со встроенным слайдером. Не могу разобраться и сделать автопрокрутку. Уже перечитал кучу тем на этом форуме, ничего не помогает.

/*
* Slideshow jQuery plugin for the front page of "Different" template
* author: dm3studio
* version: 1.0
*/
(function($) {
// Slider class
function dmSlider(container, options) {
// Define default options
this.options = $.extend({
speed: 400,
autoScrollInterval: 4000,
autoScroll: false
}, options);

delete options;

// Define common variables
this.current = 0;
this.prev = 0;
this.container = $(container);
this.wait = false;
this.autoScrollInterval = null;
this.items = this.container.children('ul:first').children();
this.itemsNum = this.items.length;
this.stop = false;

// Set defaults to all slides
for (var i = 0; i < this.itemsNum; ++i) {
var slide = this.items.eq(i);
var img = slide.find('img:first');

// Hide all slides except the first slide
if (i > 0)
slide.css({'z-index': '0', display: 'none'});

slide.css({
'background-image': 'url(' + img.attr('src') + ')',
'height': img.css('height')
});

img.remove();
}

var that = this;

var controlsContainer = this.container.find('.slideshow_controls:first');
var controls = controlsContainer.children('a');

controls.eq(0).bind('click', function(event) {
event.preventDefault();
that.changeImage('prev');
});

controls.eq(1).bind('click', function(event) {
event.preventDefault();
var a = $(this);
if (a.hasClass("start")) {
that.startAutoScroll();
a.removeClass("start").addClass("pause");
} else {
that.stopAutoScroll();
a.removeClass("pause").addClass("start");
}
});

controls.eq(2).bind('click', function(event) {
event.preventDefault();
that.changeImage('next');
});

controlsContainer.css('opacity', 0);

this.container.hover(function() {
that.stop = true;
controlsContainer.stop().animate({opacity: 1}, 'fast');
}, function() {
that.stop = false;
controlsContainer.stop().animate({opacity: 0}, 'fast');
});

// Initialize auto scrolling
if (this.options.autoScroll == true) {
this.startAutoScroll();
controls.eq(1).removeClass("start").addClass("pause");
}
};

dmSlider.prototype.changeImage = function(dir) {
if (this.wait == true)
return;

this.wait = true;
this.prev = this.current;

// Find the next and prev image
if (dir == 'next') {
this.current += 1;
this.current = (this.current >= this.itemsNum) ? 0 : this.current;
} else {
this.current -= 1;
this.current = (this.current < 0) ? this.itemsNum - 1 : this.current;
}

this.go();
};

dmSlider.prototype.go = function() {
// Hide previous item
this.items.eq(this.prev).css({'z-index': 0, display: 'block'});
// Show new item
var that = this;
this.items.eq(this.current).css({'z-index': 2, 'opacity': 0, display: 'block'}).animate({opacity: 1}, this.options.speed, function() {
that.items.eq(that.prev).css({display: 'none'});
that.wait = false;
});
};

dmSlider.prototype.startAutoScroll = function() {
var that = this;
this.autoScrollInterval = setInterval(
function() {
if (that.stop == false)
that.changeImage(that.options.animation, 'next');
},
this.options.autoScrollInterval
);
};

dmSlider.prototype.stopAutoScroll = function() {
clearInterval(this.autoScrollInterval);
};

$.fn.dm3Slideshow = function(options) {
this.each(function() {
var DmSlider = new dmSlider(this, options);
});
};
})(jQuery);
Ответ: такие большие куски кода не удобно читать без подсветки и форматирования
вот более-менее читабельный код
Код Javascript
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
/*
 * Slideshow jQuery plugin for the front page of "Different" template
 * author: dm3studio
 * version: 1.0
 */
(function($) {
// Slider class
    function dmSlider(container, options) {
// Define default options
        this.options = $.extend({
            speed: 400,
            autoScrollInterval: 4000,
            autoScroll: false
        }, options);
 
        delete options;
 
// Define common variables
        this.current = 0;
        this.prev = 0;
        this.container = $(container);
        this.wait = false;
        this.autoScrollInterval = null;
        this.items = this.container.children('ul:first').children();
        this.itemsNum = this.items.length;
        this.stop = false;
 
// Set defaults to all slides
        for (var i = 0; i < this.itemsNum; ++i) {
            var slide = this.items.eq(i);
            var img = slide.find('img:first');
 
// Hide all slides except the first slide
            if (i > 0)
                slide.css({'z-index': '0', display: 'none'});
 
            slide.css({
                'background-image': 'url(' + img.attr('src') + ')',
                'height': img.css('height')
            });
 
            img.remove();
        }
 
        var that = this;
 
        var controlsContainer = this.container.find('.slideshow_controls:first');
        var controls = controlsContainer.children('a');
 
        controls.eq(0).bind('click', function(event) {
            event.preventDefault();
            that.changeImage('prev');
        });
 
        controls.eq(1).bind('click', function(event) {
            event.preventDefault();
            var a = $(this);
            if (a.hasClass("start")) {
                that.startAutoScroll();
                a.removeClass("start").addClass("pause");
            } else {
                that.stopAutoScroll();
                a.removeClass("pause").addClass("start");
            }
        });
 
        controls.eq(2).bind('click', function(event) {
            event.preventDefault();
            that.changeImage('next');
        });
 
        controlsContainer.css('opacity', 0);
 
        this.container.hover(function() {
            that.stop = true;
            controlsContainer.stop().animate({opacity: 1}, 'fast');
        }, function() {
            that.stop = false;
            controlsContainer.stop().animate({opacity: 0}, 'fast');
        });
 
// Initialize auto scrolling
        if (this.options.autoScroll == true) {
            this.startAutoScroll();
            controls.eq(1).removeClass("start").addClass("pause");
        }
   };
 
   dmSlider.prototype.changeImage = function(dir) {
        if (this.wait == true)
            return;
 
        this.wait = true;
        this.prev = this.current;
 
        // Find the next and prev image
        if (dir == 'next') {
            this.current += 1;
            this.current = (this.current >= this.itemsNum) ? 0 : this.current;
        } else {
            this.current -= 1;
            this.current = (this.current < 0) ? this.itemsNum - 1 : this.current;
        }
        
         this.go();
    };
 
    dmSlider.prototype.go = function() {
// Hide previous item
        this.items.eq(this.prev).css({'z-index': 0, display: 'block'});
// Show new item
        var that = this;
        this.items.eq(this.current).css({'z-index': 2, 'opacity': 0, display: 'block'}).animate({opacity: 1}, this.options.speed, function() {
            that.items.eq(that.prev).css({display: 'none'});
            that.wait = false;
        });
    };
 
    dmSlider.prototype.startAutoScroll = function() {
        var that = this;
        this.autoScrollInterval = setInterval(
            function() {
                if (that.stop == false)
                    that.changeImage(that.options.animation, 'next');
            },
            this.options.autoScrollInterval
        );
    };
 
    dmSlider.prototype.stopAutoScroll = function() {
        clearInterval(this.autoScrollInterval);
    };
 
    $.fn.dm3Slideshow = function(options) {
        this.each(function() {
            var DmSlider = new dmSlider(this, options);
        });
    };
})(jQuery);
Вопрос: Почему не работает POST через AJAX

Есть такая форма:
<form id="settingsFrm" name="settingsFrm" method="POST" action="saveSettings.php">
	<input type="hidden" name="tHeaderText" value="New Title" />
	<input type="hidden" name="cHeaderText" value="" />
	<input type="hidden" name="cHeaderBackground" value="" />
	<input type="hidden" name="tTitle" value="Title" />
	<input type="submit" value="Сохранить настройки" />
</form>

Передаю её через AJAX вот так:
$("#settingsFrm").on("submit", function(eo){
	var $that = $(this);
	var $formData = new FormData($that.get(0));
	alert($that.attr("method"));
	$.ajax({
		url: $that.attr("action"),
		type: $that.attr("method"),
		contentType: "application/x-www-form-urlencoded",
		processData: true,
		data: $formData,
		dataType: "text", //"json",
		success: function(data) {
			alert(data);
		},
		error: function(xhr, textStatus, errorThrown) {
			alert("Ошибка!" + "\n" + xhr + "\n" + xhr.status);// + "\n" + xhr.responseText);
		}
	});
	eo.preventDefault();
});

saveSettings.php имеет такой вид:
<?
	if(!empty($_POST[tHeaderText]))
		echo $_POST[tHeaderText];
	else
		echo "Ошибка";
	exit;
?>

И получаю сообщение "Ошибка". Если processData=true, то php отрабатывает правильно, но при этом происходит переход на страницу saveSettings.php, а возврата на страницу с которой отправляю данные не происходит.
В чём может быть дело?
Ответ: Работает вот такой вариант отправки:
$("#settingsFrm").on("submit", function(eo){
	var $that = $(this);
	var $formData = new FormData($that.get(0));
	alert($that.attr("method"));
	$.ajax({
		url: $that.attr("action"),
		type: $that.attr("method"),
		contentType: false,
		processData: false,
		data: $formData,
		dataType: "text", //"json",
		success: function(data) {
			alert(data);
		},
		error: function(xhr, textStatus, errorThrown) {
			alert("Ошибка!" + "\n" + xhr + "\n" + xhr.status);// + "\n" + xhr.responseText);
		}
	});
	eo.preventDefault();
});
Вопрос: arbor.js Javascript вывод html ссылки, как сделать?

есть js code
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<html><!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<body <?php body_class(); ?>>
 
    <head>
        <script language="javascript" type="text/javascript"  src="js/jquery.min.js"></script>
        <script language="javascript" type="text/javascript" src="js/arbor.js" ></script>
        <script language="javascript" type="text/javascript" src="js/graphics.js" ></script>
        <script language="javascript" type="text/javascript" src="js/renderer.js" ></script>
    </head>
    <body>
Код Javascript
1
2
3
4
5
6
7
8
9
10
11
<script>
    <canvas id="viewport" width="800" height="600" border="1px"></canvas>
      <script language="javascript" type="text/javascript">
            var sys = arbor.ParticleSystem(1000, 400,1);
            sys.parameters({gravity:true});
            sys.renderer = Renderer("#viewport") ;
            var data = {
               nodes:{
                 animals:{'color':'#0F751C','shape':'dot','label':'<a href="http://google.com">Google</a>'},
...................
</script>
Вот вопрос, при вставке ссылки в label google.com, ссылка выводится в форматированном виде, т.е. выводится не ссылка, а весь html-код ссылки
<a href="http://google.com">Google</a>
Куда рыть?

Добавлено через 21 минуту
Вот код js-рисующий круги, в которых уже содержится label текст. renderer.js
Код Javascript
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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
(function(){
  
  Renderer = function(canvas){
    var canvas = $(canvas).get(0)
    var ctx = canvas.getContext("2d");
    var gfx = arbor.Graphics(canvas)
    var particleSystem = null
 
    var that = {
      init:function(system){
        particleSystem = system
        particleSystem.screenSize(canvas.width, canvas.height) 
        particleSystem.screenPadding(40)
 
        that.initMouseHandling()
      },
 
      redraw:function(){
        if (!particleSystem) return
 
        gfx.clear() // convenience Ж’: clears the whole canvas rect
 
        // draw the nodes & save their bounds for edge drawing
        var nodeBoxes = {}
        particleSystem.eachNode(function(node, pt){
          // node: {mass:#, p:{x,y}, name:"", data:{}}
          // pt:   {x:#, y:#}  node position in screen coords
 
          // determine the box size and round off the coords if we'll be 
          // drawing a text label (awful alignment jitter otherwise...)
          var label = node.data.label||""
          var w = ctx.measureText(""+label).width + 10
          if (!(""+label).match(/^[ \t]*$/)){
            pt.x = Math.floor(pt.x)
            pt.y = Math.floor(pt.y)
          }else{
            label = null
          }
 
          // draw a rectangle centered at pt
          if (node.data.color) ctx.fillStyle = node.data.color
          else ctx.fillStyle = "rgba(0,0,0,.2)"
          if (node.data.color=='none') ctx.fillStyle = "white"
 
          if (node.data.shape=='dot'){
            gfx.oval(pt.x-w/2, pt.y-w/2, w,w, {fill:ctx.fillStyle})
            nodeBoxes[node.name] = [pt.x-w/2, pt.y-w/2, w,w]
          }else{
            gfx.rect(pt.x-w/2, pt.y-10, w,20, 4, {fill:ctx.fillStyle})
            nodeBoxes[node.name] = [pt.x-w/2, pt.y-11, w, 22]
          }
 
          // draw the text
          if (label){
            ctx.font = "12px Helvetica"
            ctx.textAlign = "center"
            ctx.fillStyle = "white"
            if (node.data.color=='none') ctx.fillStyle = '#333333'
            ctx.fillText(label||"", pt.x, pt.y+4)
            ctx.fillText(label||"", pt.x, pt.y+4)
          }
        })              
 
 
        // draw the edges
        particleSystem.eachEdge(function(edge, pt1, pt2){
          // edge: {source:Node, target:Node, length:#, data:{}}
          // pt1:  {x:#, y:#}  source position in screen coords
          // pt2:  {x:#, y:#}  target position in screen coords
 
          var weight = edge.data.weight
          var color = edge.data.color
 
          if (!color || (""+color).match(/^[ \t]*$/)) color = null
 
          // find the start point
          var tail = intersect_line_box(pt1, pt2, nodeBoxes[edge.source.name])
          var head = intersect_line_box(tail, pt2, nodeBoxes[edge.target.name])
 
          ctx.save() 
            ctx.beginPath()
            ctx.lineWidth = (!isNaN(weight)) ? parseFloat(weight) : 1
            ctx.strokeStyle = (color) ? color : "#cccccc"
            ctx.fillStyle = null
 
            ctx.moveTo(tail.x, tail.y)
            ctx.lineTo(head.x, head.y)
            ctx.stroke()
          ctx.restore()
 
          // draw an arrowhead if this is a -> style edge
          if (edge.data.directed){
            ctx.save()
              // move to the head position of the edge we just drew
              var wt = !isNaN(weight) ? parseFloat(weight) : 1
              var arrowLength = 6 + wt
              var arrowWidth = 2 + wt
              ctx.fillStyle = (color) ? color : "#cccccc"
              ctx.translate(head.x, head.y);
              ctx.rotate(Math.atan2(head.y - tail.y, head.x - tail.x));
 
              // delete some of the edge that's already there (so the point isn't hidden)
              ctx.clearRect(-arrowLength/2,-wt/2, arrowLength/2,wt)
 
              // draw the chevron
              ctx.beginPath();
              ctx.moveTo(-arrowLength, arrowWidth);
              ctx.lineTo(0, 0);
              ctx.lineTo(-arrowLength, -arrowWidth);
              ctx.lineTo(-arrowLength * 0.8, -0);
              ctx.closePath();
              ctx.fill();
            ctx.restore()
          }
        })
 
 
 
      },
      initMouseHandling:function(){
        // no-nonsense drag and drop (thanks springy.js)
        selected = null;
        nearest = null;
        var dragged = null;
        var oldmass = 1
 
        // set up a handler object that will initially listen for mousedowns then
        // for moves and mouseups while dragging
        var handler = {
          clicked:function(e){
            var pos = $(canvas).offset();
            _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
            selected = nearest = dragged = particleSystem.nearest(_mouseP);
 
            if (dragged.node !== null) dragged.node.fixed = true
 
            $(canvas).bind('mousemove', handler.dragged)
            $(window).bind('mouseup', handler.dropped)
 
            return false
          },
          dragged:function(e){
            var old_nearest = nearest && nearest.node._id
            var pos = $(canvas).offset();
            var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 
            if (!nearest) return
            if (dragged !== null && dragged.node !== null){
              var p = particleSystem.fromScreen(s)
              dragged.node.p = p
            }
 
            return false
          },
 
          dropped:function(e){
            if (dragged===null || dragged.node===undefined) return
            if (dragged.node !== null) dragged.node.fixed = false
            dragged.node.tempMass = 50
            dragged = null
            selected = null
            $(canvas).unbind('mousemove', handler.dragged)
            $(window).unbind('mouseup', handler.dropped)
            _mouseP = null
            return false
          }
        }
        $(canvas).mousedown(handler.clicked);
 
      }
 
    }
 
    // helpers for figuring out where to draw arrows (thanks springy.js)
    var intersect_line_line = function(p1, p2, p3, p4)
    {
      var denom = ((p4.y - p3.y)*(p2.x - p1.x) - (p4.x - p3.x)*(p2.y - p1.y));
      if (denom === 0) return false // lines are parallel
      var ua = ((p4.x - p3.x)*(p1.y - p3.y) - (p4.y - p3.y)*(p1.x - p3.x)) / denom;
      var ub = ((p2.x - p1.x)*(p1.y - p3.y) - (p2.y - p1.y)*(p1.x - p3.x)) / denom;
 
      if (ua < 0 || ua > 1 || ub < 0 || ub > 1)  return false
      return arbor.Point(p1.x + ua * (p2.x - p1.x), p1.y + ua * (p2.y - p1.y));
    }
 
    var intersect_line_box = function(p1, p2, boxTuple)
    {
      var p3 = {x:boxTuple[0], y:boxTuple[1]},
          w = boxTuple[2],
          h = boxTuple[3]
 
      var tl = {x: p3.x, y: p3.y};
      var tr = {x: p3.x + w, y: p3.y};
      var bl = {x: p3.x, y: p3.y + h};
      var br = {x: p3.x + w, y: p3.y + h};
 
      return intersect_line_line(p1, p2, tl, tr) ||
            intersect_line_line(p1, p2, tr, br) ||
            intersect_line_line(p1, p2, br, bl) ||
            intersect_line_line(p1, p2, bl, tl) ||
            false
    }
 
    return that
  }    
  
})()
js плохо знаю, ткните что править, чтобы получилось сделать ссылку на круге.
Ответ: да заменяем функцию на следующий код:
Код Javascript
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
initMouseHandling:function(){
    // no-nonsense drag and drop (thanks springy.js)
    selected = null;
    nearest = null;
    var dragged = null;
    var oldmass = 1
    var mouse_is_down = false;
    var mouse_is_moving = false
 
 
    // set up a handler object that will initially listen for mousedowns then
    // for moves and mouseups while dragging
    var handler = {
      mousemove:function(e){
        if(!mouse_is_down){
          var pos = $(canvas).offset();
          _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
          nearest = particleSystem.nearest(_mouseP);
 
          if (!nearest.node) return false
          selected = (nearest.distance < 50) ? nearest : null
          if(selected && selected.node.data.link){
            dom.addClass('linkable')
          } else {
            dom.removeClass('linkable')
          }
        }
        return false
      },
      clicked:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        nearest = particleSystem.nearest(_mouseP);
 
        if (!nearest.node) return false
        selected = (nearest.distance < 50) ? nearest : null
 
        if (nearest && selected && nearest.node===selected.node){
          var link = selected.node.data.link
          if (link.match(/^#/)){
             $(that).trigger({type:"navigate", path:link.substr(1)})
          }else{
             window.open(link, "_blank")
          }
          return false
        }
      },
      mousedown:function(e){
        var pos = $(canvas).offset();
        _mouseP = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
        selected = nearest = dragged = particleSystem.nearest(_mouseP);
 
        if (dragged.node !== null) dragged.node.fixed = true
 
        mouse_is_down = true
        mouse_is_moving = false
 
        $(canvas).bind('mousemove', handler.dragged)
        $(window).bind('mouseup', handler.dropped)
 
        return false
      },
      dragged:function(e){
        var old_nearest = nearest && nearest.node._id
        var pos = $(canvas).offset();
        var s = arbor.Point(e.pageX-pos.left, e.pageY-pos.top)
 
        mouse_is_moving = true
 
        if (!nearest) return
        if (dragged !== null && dragged.node !== null){
          var p = particleSystem.fromScreen(s)
          dragged.node.p = p
        }
 
        return false
      },
 
      dropped:function(e){
        if (dragged===null || dragged.node===undefined) return
        if (dragged.node !== null) dragged.node.fixed = false
        dragged.node.tempMass = 50
        dragged = null
        selected = null
        $(canvas).unbind('mousemove', handler.dragged)
        $(window).unbind('mouseup', handler.dropped)
        _mouseP = null
 
        if(mouse_is_moving){
          // console.log("was_dragged")
        } else {
          handler.clicked(e)
        }
 
        mouse_is_down = false
 
        return false
      }
    }
    $(canvas).mousedown(handler.mousedown);
    $(canvas).mousemove(handler.mousemove);
 
  }
 
}
и html + js код правим на добавляем поле link с google.com
Код Javascript
1
2
3
4
5
6
7
8
   <canvas id="viewport" width="1024" height="800" border="1px"></canvas>
      <script language="javascript" type="text/javascript">
            var sys = arbor.ParticleSystem(1000, 400,1);
            sys.parameters({gravity:true});
            sys.renderer = Renderer("#viewport") ;
            var data = {
               nodes:{
                 animals:{'color':'#0F751C','shape':'dot','label':google','link':'http://google.com'},
Вот вопрос, как добавить еще св-во css cursor : pointer на круги?

Добавлено через 58 минут
вариант добавить св-во cursor : pointer для canvas не очень хорошее решение.
Вопрос: Ошибка в скрипте с переполнением Cookies

Доброго времени!
Есть сайт: – и при его обновлении, открывается белый экран, вместе с такой надписью:

Bad Request

Your browser sent a request that this server could not understand.
Size of a request header field exceeds server limit.

Всего скорее дело в Cookies в скриптах js.
Может быть кто-нибудь знает, в чем причина?
P.S. Без js файлов странички открываются.
Ответ:
Сообщение от raindew
Your browser sent a request that this server could not understand.
Size of a request header field exceeds server limit.
Вопрос: При повторном открытии не загружается скрипт

Здравствуйте уважаемые. Проблема с загрузкой скрипта при повторном открытии popup. В общем есть такое изобретение в нем вызывается popup:
function show_video_info(url) {
		 var dom = {'wrapper' : null, 'body':null, 'head':null, 'title':null, 'loading':null, 'content':null};
		
        dom.wrapper        = $('<div class="dialog_gallery"></div>');

        dom.body           = $('<div class="dialog_gallery_dialog_body __active __ready"></div>');	

        dom.content        = $('<div class="dialog_gallery_dialog_content"></div>');
		
		var loading        = $('<div class="dialog_gallery_dialog_loading"><div class="dialog_gallery_dialog_loading_text"></div></div>');
		
        $(dom.content).html(loading);
		setTimeout(function() {
           $('.dialog_gallery_dialog_loading').remove();
		   $.get(url, function(data){
		       $(dom.content).html(data);
           });
		},1000);

		$(dom.body).append(dom.content);
		$(dom.wrapper).append(dom.body).append('<div style="clear:both; display:block;"></div>');
        $(document.body).append(dom.wrapper);
		$("html,body").css("overflow","hidden");
}

А в этом содержимое:
<script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/jquery.js"></script>
  <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL;?>/js/video/css/elite.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL;?>/js/video/css/elite-font-awesome.css" type="text/css">
  <link rel="stylesheet" href="<?php echo RESOURCE_SITE_URL;?>/js/video/css/jquery.mCustomScrollbar.css" type="text/css">
  <script src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/froogaloop.js" type="text/javascript"></script>
  <script src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/jquery.mCustomScrollbar.js" type="text/javascript"></script> 
  <script src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/THREEx.FullScreen.js"></script>
  <script src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/videoPlayer.js" type="text/javascript"></script>
  <script src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/Playlist.js" type="text/javascript"></script>
  <script type="text/javascript" src="<?php echo RESOURCE_SITE_URL;?>/js/video/js/ZeroClipboard.js"></script>

      <script type="text/javascript" charset="utf-8">
     $(function(){
        videoPlayer = $("#video_box").Video({   //ALL PLUGIN OPTIONS
            instanceName:"player1",                      //name of the player instance
            autohideControls:2,                     //autohide HTML5 player controls
            hideControlsOnMouseOut:"No",            //hide HTML5 player controls on mouse out of the player: "Yes","No"
            videoPlayerWidth:1026,               
            videoPlayerHeight:500,                 
			responsive:true,				        
			playlist:"Right playlist",              
			playlistScrollType:"3d",                 
			playlistBehaviourOnPageload:"opened",		 
			autoplay:true,                        
			colorAccent:"#cc181e",                 
			vimeoColor:"00adef",                   
            youtubeControls:"custom controls",			
			youtubeSkin:"dark",                     
            youtubeColor:"red",                     
			youtubeQuality:"default",                   
            videoPlayerShadow:"effect1",            
			loadRandomVideoOnStart:"No",            
            shuffle:"No",				            
            posterImg:"<?php echo $output['video_info']['iurlmaxres'];?>",
            onFinish:"Play next video",             
			nowPlayingText:"No",                  
            fullscreen:"Fullscreen native",         
            rightClickMenu:true,                   
			hideVideoSource:false,					
			showAllControls:true,					
			allowSkipAd:true,                          
            infoShow:"Yes",                        
            shareShow:"No",                       
            facebookShow:"No",                    
            twitterShow:"No",                      
            mailShow:"No",                        
            facebookShareName:"Elite video player",      
			facebookShareLink:"",  
			facebookShareDescription:"Elite Video Player is stunning, modern, responsive, fully customisable high-end video player for WordPress that support advertising and the most popular video platforms like YouTube, Vimeo or self-hosting videos (mp4).", //third parametar of facebook share in facebook feed dialog is description below link
			facebookSharePicture:"", 
            twitterText:"Elite video player",			
            twitterLink:"", 
            twitterHashtags:"wordpressvideoplayer",		 
            twitterVia:"Creative media",				
            googlePlus:"", 
            logoShow:"Yes",                        
            logoClickable:"Yes",                    
            logoPath:"<?php echo RESOURCE_SITE_URL;?>/js/video/images/logo/logo.png",        
            logoGoToLink:"http://kadamas.ru",  
            logoPosition:"bottom-left",            
            embedShow:"No",                        
            embedCodeSrc:"kadamas.ru", 
            embedCodeW:"746",                       
            embedCodeH:"420",                       
            embedShareLink:"kadamas.ru", 
			youtubePlaylistID:"",
			youtubeChannelID:"", 
			//manual playlist			
            videos:[
			                {
                    videoType:"youtube",                                     
                    title:"<?php echo $output['video_info']['video_name'];?>",                                           
                    youtubeID:"<?php echo $output['video_info']['original_video_id'];?>",                                          
                    vimeoID:"",                                              
                    mp4:"",
                    imageUrl:"<?php echo $output['video_info']['iurlmaxres'];?>",               
					imageTimer:4,
					prerollAD:"no",                                                 
                    prerollGotoLink:"",                          
                    preroll_mp4:"",   
					prerollSkipTimer:5,													   
                    midrollAD:"no",                                                                  
					midrollAD_displayTime:"00:10",                                                    
					midrollGotoLink:"",                                         
					midroll_mp4:"", 
					midrollSkipTimer:5,	
					postrollAD:"no",                                                                
					postrollGotoLink:"",                                        
					postroll_mp4:"",  
					postrollSkipTimer:5,
					popupImg:"",                        			  
					popupAdShow:"no",                                                                
					popupAdStartTime:"00:03",                                                         
					popupAdEndTime:"00:07",                                                          
					popupAdGoToLink:"",
					description:"",                        
                    thumbImg:"<?php echo $output['video_info']['thumbnail_url'];?>",                       
                    info:"<?php echo $output['video_info']['video_name'];?>"                                                                   
                },
   ]
        });
    });
	</script>

<div class="dialog_gallery_dialog_head"><span class="dialog_gallery_dialog_title"><span class="dialog_gallery_dialog_title_icon"><span id="close_gallery" class="dialog_gallery_dialog_close_button" title="Закрыть просмотр"></span></span></span></div>
<div id="pictureFolder" class="album">
  <div id="modal_overlay"></div>
    <div class="ad-gallery __animated">
	    <div id="video_box"></div>
		</div>
	
	</div>

<script type="text/javascript">
$(function(){
    $('.dialog_gallery_dialog_close_button').click(function(){
			if($('#video_player').length == 1){
			$("html,body").css("overflow","auto");
			}
			$(this).parents('.dialog_gallery').remove();
    });
});
</script>


При первом открытии все срабатывает отлично, но при закрытии и повторном открытии без перезагрузки страницы скрипт не загружает видео. Подскажите в чем причина и как ее исправить?! Может как то нужно обнулять функцию videoPlayer = $("#video_box").Video({
Ответ:
<script type="text/javascript" charset="utf-8">
     $(function(){
        $("#video_box").Video({   //ALL PLUGIN OPTIONS
            instanceName:"player1",                      //name of the player instance
            autohideControls:2,                     //autohide HTML5 player controls
            hideControlsOnMouseOut:"No",            //hide HTML5 player controls on mouse out of the player: "Yes","No"
            videoPlayerWidth:1026,              
            videoPlayerHeight:500,                
            responsive:true,                       
            playlist:"Right playlist",             
            playlistScrollType:"3d",                
            playlistBehaviourOnPageload:"opened",       
            autoplay:true,                       
            colorAccent:"#cc181e",                
            vimeoColor:"00adef",                  
            youtubeControls:"custom controls",         
            youtubeSkin:"dark",                    
            youtubeColor:"red",                    
            youtubeQuality:"default",                  
            videoPlayerShadow:"effect1",           
            loadRandomVideoOnStart:"No",           
            shuffle:"No",                          
            posterImg:"<?php echo $output['video_info']['iurlmaxres'];?>",
            onFinish:"Play next video",            
            nowPlayingText:"No",                 
            fullscreen:"Fullscreen native",        
            rightClickMenu:true,                  
            hideVideoSource:false,                 
            showAllControls:true,                  
            allowSkipAd:true,                         
            infoShow:"Yes",                       
            shareShow:"No",                      
            facebookShow:"No",                   
            twitterShow:"No",                     
            mailShow:"No",                       
            facebookShareName:"Elite video player",     
            facebookShareLink:"", 
            facebookShareDescription:"Elite Video Player is stunning, modern, responsive, fully customisable high-end video player for WordPress that support advertising and the most popular video platforms like YouTube, Vimeo or self-hosting videos (mp4).", //third parametar of facebook share in facebook feed dialog is description below link
            facebookSharePicture:"",
            twitterText:"Elite video player",          
            twitterLink:"",
            twitterHashtags:"wordpressvideoplayer",     
            twitterVia:"Creative media",               
            googlePlus:"",
            logoShow:"Yes",                       
            logoClickable:"Yes",                   
            logoPath:"<?php echo RESOURCE_SITE_URL;?>/js/video/images/logo/logo.png",       
            logoGoToLink:"http://kadamas.ru", 
            logoPosition:"bottom-left",           
            embedShow:"No",                       
            embedCodeSrc:"kadamas.ru",
            embedCodeW:"746",                      
            embedCodeH:"420",                      
            embedShareLink:"kadamas.ru",
            youtubePlaylistID:"",
            youtubeChannelID:"",
            //manual playlist          
            videos:[
                            {
                    videoType:"youtube",                                    
                    title:"<?php echo $output['video_info']['video_name'];?>",                                          
                    youtubeID:"<?php echo $output['video_info']['original_video_id'];?>",                                         
                    vimeoID:"",                                             
                    mp4:"",
                    imageUrl:"<?php echo $output['video_info']['iurlmaxres'];?>",              
                    imageTimer:4,
                    prerollAD:"no",                                                
                    prerollGotoLink:"",                         
                    preroll_mp4:"",  
                    prerollSkipTimer:5,                                                   
                    midrollAD:"no",                                                                 
                    midrollAD_displayTime:"00:10",                                                   
                    midrollGotoLink:"",                                        
                    midroll_mp4:"",
                    midrollSkipTimer:5,
                    postrollAD:"no",                                                               
                    postrollGotoLink:"",                                       
                    postroll_mp4:"", 
                    postrollSkipTimer:5,
                    popupImg:"",                                     
                    popupAdShow:"no",                                                               
                    popupAdStartTime:"00:03",                                                        
                    popupAdEndTime:"00:07",                                                         
                    popupAdGoToLink:"",
                    description:"",                       
                    thumbImg:"<?php echo $output['video_info']['thumbnail_url'];?>",                      
                    info:"<?php echo $output['video_info']['video_name'];?>"                                                                  
                },
   ]
        });
    });
    </script>
Вопрос: Верстка слайдера с табами.

Добрый день. Нужно сверстать слайдер с табами. В качестве табов взято jquery-ui, слайдер это slick slider. вот кусок кода
Код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/slick.css">


    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <script async="" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#tabs" ).tabs( );
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.model-slider').slick({
                dots: false,
                centerMode: true,

                slidesToShow: 5,
                autoplay: true,
                autoplaySpeed: 5000,
                prevArrow: '.slick-prev',
                nextArrow: '.slick-next',
                responsive: [
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 3,

                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 639,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                            centerMode: false,
                        }
                    }]

            });   });

    </script>
    <script type="text/javascript">


        $(document).ready(function () {


            $('#my-slide').DrSlider({
                width: 1200,
                height: 440,
                navigationType: 'circle',
                transitionSpeed: 4000,
                duration: 8000,
                navigationHoverColor: "#ff8969",
                navigationColor: "#fe9565"
            }); //Yes! that's it!
        });

    </script>
</head>
<body>

<div class="container-fluid wrapper">
<div class="model   row">


                <div id="tabs-1" class="model-slider ">
                    <div class="product"><div><img src="./img/woomen1.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>


                   <div  class="product">  <div><img src="./img/woomen2.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

              <div  class="product">  <div><img src="./img/woomen3.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

               <div  class="product">  <div><img src="./img/woomen4.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

                  <div  class="product">  <div><img src="./img/woomen5.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

                ......


                </div>
      </div>

                <div id="tabs-2" class="model-slider ">  ..... </div>
.....


Проблема, то при переключении табов  изображения плывут и начинают работать когда сладер начинает их двигать. Насколько понимаю нужно его нужно инициализировать при переключении как это лучше сделать? спасибо.
Ответ:
Добрый день. Нужно сверстать слайдер с табами. В качестве табов взято jquery-ui, слайдер это slick slider. вот кусок кода
Код

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Test</title>

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/slick.css">


    <link href="css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery-ui.js"></script>
    <script type="text/javascript" src="js/jquery.devrama.slider.js"></script>
    <script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
    <script type="text/javascript" src="js/slick.min.js"></script>
    <script async="" src="js/bootstrap.js"></script>
    <script type="text/javascript">
        $(function() {
            $( "#tabs" ).tabs( );
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.model-slider').slick({
                dots: false,
                centerMode: true,

                slidesToShow: 5,
                autoplay: true,
                autoplaySpeed: 5000,
                prevArrow: '.slick-prev',
                nextArrow: '.slick-next',
                responsive: [
                    {
                        breakpoint: 992,
                        settings: {
                            slidesToShow: 4,
                            slidesToScroll: 3,

                        }
                    },
                    {
                        breakpoint: 767,
                        settings: {
                            slidesToShow: 3,
                            slidesToScroll: 2
                        }
                    },
                    {
                        breakpoint: 639,
                        settings: {
                            slidesToShow: 2,
                            slidesToScroll: 1,
                            centerMode: false,
                        }
                    }]

            });   });

    </script>
    <script type="text/javascript">


        $(document).ready(function () {


            $('#my-slide').DrSlider({
                width: 1200,
                height: 440,
                navigationType: 'circle',
                transitionSpeed: 4000,
                duration: 8000,
                navigationHoverColor: "#ff8969",
                navigationColor: "#fe9565"
            }); //Yes! that's it!
        });

    </script>
</head>
<body>

<div class="container-fluid wrapper">
<div class="model   row">


                <div id="tabs-1" class="model-slider ">
                    <div class="product"><div><img src="./img/woomen1.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>


                   <div  class="product">  <div><img src="./img/woomen2.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

              <div  class="product">  <div><img src="./img/woomen3.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

               <div  class="product">  <div><img src="./img/woomen4.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

                  <div  class="product">  <div><img src="./img/woomen5.jpg">HOT SHORTS<h4>$100</h4> <a
                            class="plus-button"
                            href="">ADD TO CART<span
                            class="plus-button glyphicon glyphicon-plus"></span></a></div></div>

                ......


                </div>
      </div>

                <div id="tabs-2" class="model-slider ">  ..... </div>
.....


Проблема, то при переключении табов  изображения плывут и начинают работать когда сладер начинает их двигать. Насколько понимаю нужно его нужно инициализировать при переключении как это лучше сделать? спасибо.