I already made a shim config specifying the dependencies for jquery and jquery++ but still doesn't work

requirejs.config({
paths: {
jquery: 'libs/jquery',
jquerymobile: 'libs/jquery-mobile/jquery.mobile',
underscore: 'libs/underscore',
jquerypp: 'libs/jquerypp',
elastislide: '../js/elastislide',
app: '../js/app',
model: '../js/app/model',
view: '../js/app/view',
controller: '../js/app/controller',

    shim: {
        'elastislide': {
            deps: ['jquery', 'jquerypp']
        }
    }
}

});

Every browsers and even in iphone, ipad safari also working fine but in desktop version it is not displaying the videos.
After the slideshow there is thumbnail in that videos is not appearing in safari browser only in desktop version. Please help me fix this issue.
Link: https://build.equipmentone.com/listing?listingid=392248&listingpageview=new&fwcache=1

Thank you,

Rashmi Reddy

Although Elastislide works well in the developer tools version of IE8, native IE8 is not so friendly, and the preview image of example 4 never changes when clicking on one of the thumbnail images. Instead, the link is followed to /#. This is even the case on your own hosted example: http://tympanus.net/Development/Elastislide/index4.html

I realize that at this point it's very hard to get ahold of a native IE8 browser to play with, but you really cannot claim that Elastislide works in IE8, or at least example 4 doesn't. I haven't tried the other examples because my current project calls for work done like example 4.

If I can find a solution I'll be sure to post back, but I'm hoping you can provide some help, as I'm not the best at debugging javascript, and you would know your plugin best.

First I would like to thank you for the job you done.
But, I got some problem with elastislide.js..
When my browser cache is empty (for chrome,firefox and safari), and all of my website is loading, the elastislide is working fine and show my items.
However, when I reload the page, the items are cached, they doesn't appears.
They are loaded, but max-height and height are set to 0px.

Thanks in advance for the help.
Benjamin.

Hi,
at first your Slider it's a great Work.

Is there a Solution for mixed Images in a Slieder?
If i have images in landscape and portrait in the slider, the height of the Slider is oriented at the portrait images height.

Any way to fix this. Maybe crop the portrait images or so?

best regards an sorry for my english

Hello there,

thanks for this nice plugin, i need to change the transition effect to a slide effect.

How can i change this ?

Thanks.

Most plugins include some information in their README... I cannot find what I am looking for anywhere; I need to know what exactly is required to use this plugin (as far as includes).

Do I only need the following?:

• elastislide.css
• jquery.elastislide.js

Or do I need a little more?:

• elastislide.css
• jquery.elastislide.js
• modernizr.custom.17475.js

Or all of the following?:

• elastislide.css
• jquery.elastislide.js
• modernizr.custom.17475.js
• jquerypp.custom.js

I already have Modernizr included, so I am sure I do not need to include that file, but as for the others that come with this repo, there is little to no mention of the required includes. I could imagine needing to include a couple of the images, as well as this _jquerypp.custom.js_ for swipe support...

Can anyone shed some light on this for me?

$( '#folderCarousel' ).elastislide({
                onReady : function() { 
                    console.log('elastislide onReady');
                },
                onClick : function(el, position, evt){
                    console.log('elastislide onClick');
                }
            });

There are times when onClick never works.

hello it would be great if we can open image in large mode like a popup
thanks

Hi Codrops,
elastislide is fantastic!
How can position the carousel on the link active?

Es.
http://demo2.vedanet.it/mr-liena-integratori

If you are Anasterol the page, the carousel is positioned correctly.
http://demo2.vedanet.it/anasterol

If you are the page Flavion, the carousel is positioned on Anasterol instead of Flavion.

Thanks alot for your help.
D.

Cannot read property 'prefixed' of undefined
ln: 227

call:

<script>
 $.noConflict();
 jQuery(document).ready(function($) {
   $('.carousel').elastislide();
 });
</script>

Elastislide plugin arrow stop working suddendly.o shrinking of window size it doesnot show display:none to display:block in arrows
This is the example I have ussed http://tympanus.net/Development/Elastislide/index3.html
Please give me any suggestion @botelho

I was styling Elastislide and I noticed it skip many li or reviews in my case when I slide ???

I added numbers to the title it will skip from 3 to 8

4 5 6 7 will not be showing

Here an example

https://jsfiddle.net/35q41d6q/

how can I fix this issue

I have a Elastislide setup on my site with 10-15 thumbnails. The slider works great, everything is right where I want it, but I cannot get a function to work.

Here is what I am trying to do:

spThumbSlider = $('#carousel').show().elastislide({
    orientation : 'vertical',
    minItems : 5, 
    onClick : function( $item ) {
        spThumbSlider.setCurrent($item.index());
    }
}); 

Whenever I do that, I receive a console error that undefined is not a function. I've tried a few of the other functions, same issue.

I have other images on the page that call a click on the carousel thumbnail when hovered. That part works great. The script finds the image in the thumbnails, sets it to active, and "clicks" it. I just need the slider to slide to the image.

What am I doing wrong?

.elastislide-horizontal nav span {
top: 50%;
left: 10px;
margin-top: -11px;
}

left change to 9px;
if 10px circle was displacement

I change the <li> data.
At begin, the <ul> is
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4.jpg" alt="image04" /></a></li>
</ul>
when click some button, i change the <li> as bellow
<ul id="carousel" class="elastislide-list">
<li><a href="#"><img src="images/small/1_big.jpg" alt="image01" /></a></li>
<li><a href="#"><img src="images/small/2_big.jpg" alt="image02" /></a></li>
<li><a href="#"><img src="images/small/3_smal.jpg" alt="image03" /></a></li>
<li><a href="#"><img src="images/small/4_smal.jpg" alt="image04" /></a></li>
</ul>

How should i do?

The problem i found is if i click on the right arrow and for example the last picture the current position will not show in the slider. It always resets to the first six pictures. It does not _slideToCurrent ... See my example: http://preview.atelierpapenfuss.de/axxo/index.php?id=14 You can see the jquery.elastislide.js for details in the source of the website.

Thx for any help.

Sometimes the images just randomly don't show up. The network tab in the developers tools says the images were aborted.

The imagesLoaded Plugin as implemented in the slideshow has a few issues.

Here is a gist with a fix:
https://gist.github.com/yemster/1539102

Left arrow doesn't work for Opera 12

I'm experiencing a strange issue.

When i first load a page carousel is working fine. But when I refresh the page, if I click on a thumbnail, full image never changes.
This happens in my site where there are some other JS files. (It's a Drupal 7 site to be exact).

It was a strange issue, so I checked the files from the package and they worked as expected.

But then, I went to the demo page (http://tympanus.net/Development/Elastislide/index4.html) and there I'm encountering the same issue.

I'm using Google Chrome Version 33.0.1750.152 on Linux Ubutnu 13.10
(It's working as expected on Firefox)

Is there a solution for it?

I have an error with this plugin is the title, I can help. I'm working with foundation framework 4, I want to insert the slider in a nav tab but I get this error and the plugin does not work, I'm trying to Example 4.

Hi,

elastislide doesn't work while it's loaded for the first time on Firefox. If I reload page it works, problem exists only for first load of specific page. Looks like if the page is in cache it works correctly.

Checked on FF 26.

To replicate problem:

1. close Firefox
2. open Firefox in Private Window
3. go to http://tympanus.net/Development/Elastislide/index4.html

hi,

i am using this elastislide in my personal project. I have loaded so many images in slider but i am facing time lagging issue in loading.

is there any way to add loader image for this slider

thank you.

I have a carousel on my html, in js i call the elastslide everytime a dialog open, it creates a new carousel. But when i close this dialog, the carousel have to be destroyed, and i don't now how to do! Can anyone help me?

I can't seem to get the swipe function, mentioned in the codrops article, to work on my mobile (Nexus 4). None of the demos react to a swipe, nor does my own install.

Any pointers, or is this a known bug?

Hi,

I am using the elastislide image gallery and the gallery is at the bottom of the webpage and each time I click the next image it jumps to top of the page after the image is loaded. Is there anyway to stop that ?

I have made a responsive website with bootstrap and I've used Elastislide gallery but I have an issue in Firefox and Safari. The thumbnails are not presented in the gallery, it only shows the first picture. Sometimes when I refresh the page it shows the thumbs but when I click them it sends to the top of the page. You can see the page here:

http://zunatur.com/lang/en/index.html

Anyone with the same issue?! Any help is aprecciated.

Ubuntu 11.10 + Firefox 15.0.1.

Is it possible to set image permalink change every slide the image like at yahoo photo gallery ? ex : http://id.celebrity.yahoo.com/foto/selebritas-di-karpet-merah-oscars-2014-slideshow/brad-pitt-and-angelina-jolie-photo-1393808813567.html

Is it possible to set it up with autoplay?

With Firefox 20 on Windows 8 I've notice a strange scroll effect ... see the screenshot below :

With Chrome on Windows works fine ... with Firefox on OS X too.

Hi,
I would like to know what is the reason why the Elastislide jquery plugin is not working properly with Google Chrome. Thanks!
my website http://www.ricardopaiba.com
The elastislide is located in the bottom of the screen

as said, as per my (photographer) costumer request, i'm trying to _convert the change image on slider : onMouseOver instead of onClick
mmh... or why not reacting upon the two events ?

:-)

PS: now (newbie)trying... como back if succeed.

hello it should be great to have a option for display thumbs in bottom of large image
regards

I just need the code to use the plugin, do I need to import "jquerypp.custom.js", "modernizr.custom.17475.js", "custom.css", "demo.css" too?

• Thanks

I have been using Elastislider for my product pages and it works beautifully. However, as soon as I attempt to use Elastislider on a "listing page", something goes odd. When trying to use more than one instance of it on a page, Elastislide appears to be generating extra XHTML markup. As compared to how it behaves on a single page instance, Elastislide creates many nested divs when I use it multiple times.

Note that, in my case, I am trying to integrate Elastislide into Wordpress. This may or may not be the source of the problem or the cause of why Elastislide is nesting in this manner. So, just in case, I have already issued a question on WP forums:

http://wordpress.org/support/topic/archive-listing-nested-duplicate-divs-elastislider

Apologies for the external link but I could not figure out how to parse the code (seen in the wordpress forum link) here on Github. There is also a duplicate thread about this seen here, but it was more than 8 months old: #5)

Hey, maintainer(s) of codrops/Elastislide!

We at VersionEye are working hard to keep up the quality of the bower's registry.

We just finished our initial analysis of the quality of the Bower.io registry:

7530 - registered packages, 224 of them doesnt exists anymore;

We analysed 7306 existing packages and 1070 of them don't have bower.json on the master branch ( that's where a Bower client pulls a data ).

Sadly, your library codrops/Elastislide is one of them.

Can you spare 15 minutes to help us to make Bower better?

Just add a new file bower.json and change attributes.

{
  "name": "codrops/Elastislide",
  "version": "1.0.0",
  "main": "path/to/main.css",
  "description": "please add it",
  "license": "Eclipse",
  "ignore": [
    ".jshintrc",
    "**/*.txt"
  ],
  "dependencies": {
    "<dependency_name>": "<semantic_version>",
    "<dependency_name>": "<Local_folder>",
    "<dependency_name>": "<package>"
  },
  "devDependencies": {
    "<test-framework-name>": "<version>"
  }
}

Read more about bower.json on the official spefication and nodejs semver library has great examples of proper versioning.

NB! Please validate your bower.json with jsonlint before commiting your updates.

Thank you!

Timo,
twitter: @versioneye
email: [email protected]
VersionEye - no more legacy software!

I'd like to support high resolution images for iOS and Mac. I tried to use Foresight in conjunction with Elastislide:

http://www.cdnconnect.com/docs/foresightjs

This is how I tried to load the images:

<li><a href="#"><img data-src="/images/gallery1.jpg" alt="" data-width="100" data-height="100" class="fs-img"><noscript><img src="/images/gallery1.jpg" alt="" width="100" height="100"></noscript></a></li>

Unfortunately, the images aren't loaded. I assume there's a conflict in the image loading code. If I change the HTML to just the plain img tag, Elastislide works correctly. Outside of Elastislide Foresight works correctly.

Any other solution than Foresight is welcome too (although I like Foresight because it avoids fetching the low resolution images first).