Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images
Licensed under the MIT License
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images
Elastislide is a responsive image carousel that will adapt fluidly in a layout. It is a jQuery plugin that can be laid out horizontally or vertically with a pre-defined minimum number of shown images
Licensed under the MIT License
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']
}
}
}
});
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
Is it possible to set it up with autoplay?
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.
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?
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
Rashmi Reddy
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?:
Or do I need a little more?:
Or all of the following?:
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?
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.
Is there a solution for it?
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
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 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.
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)
$( '#folderCarousel' ).elastislide({
onReady : function() {
console.log('elastislide onReady');
},
onClick : function(el, position, evt){
console.log('elastislide onClick');
}
});
There are times when onClick never works.
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
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?
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'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).
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!
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.
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.
Cannot read property 'prefixed' of undefined
ln: 227
call:
<script>
$.noConflict();
jQuery(document).ready(function($) {
$('.carousel').elastislide();
});
</script>
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
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
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?
hello it should be great to have a option for display thumbs in bottom of large image
regards
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?
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:
.elastislide-horizontal nav span {
top: 50%;
left: 10px;
margin-top: -11px;
}
left change to 9px;
if 10px circle was displacement
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)
hello it would be great if we can open image in large mode like a popup
thanks
Hello there,
thanks for this nice plugin, i need to change the transition effect to a slide effect.
How can i change this ?
Thanks.
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.
Left arrow doesn't work for Opera 12
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:
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?
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 ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.