174 comments found.
Thanks for your response! I disabled the min-width. Unfortunately it looks the same in mobile view on my android.
Maybe one more thing: I set slide size as follows:
slide_height: 467, slide_width: 700
But in browser it is scaled up to 875px x 584px.
To locate the problem I created a simple example based on your example_5.html as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.easing.1.3.js" type="text/javascript"></script>
<script src="js/jquery.unleash.2.js" type="text/javascript" ></script>
<link rel="stylesheet" type="text/css" href="css/example_5.css" />
<script type="text/javascript">
$(document).ready(function () {
var unleash = $("#outer").unleash({
captionClassName: '.caption_1',
caption_animation: "pop-up",
duration: 700,
Event: "click",
hide_controls: true,
easing: "easeInOutQuart",
captionEasing: "easeInOutBack",
collapse_on_mouseout: false
}).data("plugin_unleash");
});
</script>
</head>
<div style="width: 1000px; margin: 0 auto;">
<div class="unleash_container">
<div class="emboss">
</div>
<div id="outer">
<div class="box">
<a href="http://www.hessbeck.de/portfolio/portrait-lifestyle/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i45b51b56a441c0cc/1389690480/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/dresden-umgebung/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i6cfc0920b88f12c7/1389690599/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/stadt-architektur/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/ie43ef413e7e989d3/1389690491/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/natur-landschaft/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/icbf59251916debe0/1389690589/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/hochzeit-verlobung/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i55d0029383baa9e5/1389690585/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/bewerbung-business/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i44145662627a0569/1389690581/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/portrait-lifestyle/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i30b5e55b354032d9/1389690575/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/dresden-umgebung/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/ie5ef53d2588a5665/1389690571/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/stadt-architektur/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/ib08afb18df4b2243/1389690566/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/natur-landschaft/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i0618a3c6ba39ca95/1389690560/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/hochzeit-verlobung/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/i3cafdd708232589a/1389690544/std/image.jpg" alt="" /></a>
</div>
<div class="box">
<a href="http://www.hessbeck.de/portfolio/bewerbung-business/"><img src="http://u.jimdo.com/www60/o/s2f58a1ad850b505e/img/ifc0f3bc5926391a1/1389690531/std/image.jpg" alt="" /></a>
</div>
</div>
</div>
</div>
When viewed in browser there is always space between the foreground slide and the “waiting” slides on the rigtht border. Why does the gap does not scale automatically?
Hi.
First of all: I am really happy with the slider, especially because its responsive! Thank you for your great work!
I am using example 5 with no captions. It works well in FF, Chrome and IE. I’ve only got problems with mobile (see www.hessbeck.de, e.g. on Android), when I enable “Mobile Ansicht” (mobile view) instead of “Standard Ansicht” (standard view).
The slides appear one upon the other. Any ideas?
Thanks in advance!
Regards. Stefan
#container {
min-width: 500px;
}
so try to remove min-width: 500px; and get back to me.
can you please help me to install. I have the Themeforest Theme Kallyas with other sliders, but i dont’t know where to copy the files of this slider. Thank you
did you read the documentation? http://goo.gl/mfahgM
sure but i think i don’t understand this stuff – can you have a look http://www.simply-and-beautiful.de/unleash-2/ and help me
why are you wrapping comments with p tags, like in
<p><!-- container --></p> <p><!-- slider --></p>, etc…?
i pasted your example – sorry think it nothing for me – i will cancel the integration
Hello, I am having trouble integrating the slider into a template that already uses jquery. Imagess run and slide without problem, but the captions will not show. I know is hard without looking at it, but do you ave any idea where to start looking?
Is it possible to send me a link??
sure… sent it through your http://codecanyon.net/user/themegasm page.
try changing caption_animation: “pop-up”, to caption_animation: “double”,
thanks for the reply.. just did, but see no change… updated link.
captionClassName: '.caption_1',replace it with:
captionTitleClassName: '.upper_text', captionClassName: '.lower_text',
..ok… I was aware of that… I was expecting the caption to appear only in the first one since is the one with the appropriate class ‘caption_1’
iI think I’ve found the problem, there’s a missing style sheet, make sure you loaded all the css files
and if you are using caption 1, change the value “double” to “pop-up” or “opacity”
changed everything as recommended, added every css I found in the samples… but still…
..what css is missing?
.caption_1 {
position: absolute;
}
well wit that change… captions show finally, but need some formatting.. i think
how do you want it to look like? from the examples available.
by the way you are still using caption_animation: “double”, change it to pop-up
i would say like sample 5.. maybe a bit less transparent..
why don’t you just load example_5.css?
.box p {
margin-top: 0;
margin-bottom: 20px;
padding: 20px 30px 25px;
border: 1px solid #dfdfdf;
border-top: 2px solid #747474;
background-repeat: no-repeat;
background-position: 20px 30px;
box-shadow: inset 0 0 15px rgba(0,0,0,0.04);
}
it makes it look a little wired so remove them if possible
so, I have to leave now, if you still have any questions, leave it here and I will check it later 
is it possibly to disable the progress bar that shows at the top of the images on your preview?
tks!
set slideshow to false
Thanks for your reply. I want the slide to rotate… what I would like to hide is the thin progress bar of the time left for the next image….
you can try this, replace this CSS
.unleash_loader_bg {
height: 20px;
overflow: hidden;
background: #;
z-index: 999;
width: 100%;
top: -12px;
position: absolute;
}
with this:
.unleash_loader_bg {
height: 20px;
overflow: hidden;
background: #;
z-index: 999;
width: 100%;
top: -12px;
position: absolute;
opacity: 0;
}
.
Any chance of disabling the autoplay?
sure, set slideshow to false
Hi,
I want to have this slider..however, one thing i want WHEN A USER CLICKS ON ANY OF THE IMAGE, it should display full image & not other small rectangles on either side.. When i click back, the 5 blocks of images should display back..is that possible here?
Unfortunately you can’t do that currently, but maybe I’ll try to include that in a future update.
Hi, I am just trying to use a very minimal setup to test the script out, however I am getting the following JavaScript error:
TypeError: $(...).position(...) is undefined ...ng_dur = Math.abs($(’.unleash_loader’).position().left / $(’.unleash_loader’).wi…
I did not think ’.unleash_loader’ had to be in the initial HTML?
http://stage2.curran-connors.com/emj/I’m not having this error, I just noticed your slider isn’t looking properly because you have to add max-width: none; style to img as follows
.box img { position: relative; height: 100%; max-width: none; }
Actually that was not the problem. I fixed that by adding width: 100% instead. I tried your suggestion just for the sake of it right now and that did not seem to do the truck.
As for the original error, I eliminated it by including <! div class=”unleash_loader” >< /div > inside my HTML. For some reason it was not being added automatically by the script.
that’s weird, it should be appended automatically, so everything is fine now?
Right I thought it should be appended automatically, I am not sure why it was not being added. When I added it manually, the JS error went away and the plugin seems to be working fairly well. But if you take a look at the link again:
http://stage2.curran-connors.com/emj/And resize the browser, you will see my XYZ columns underneath the plugin wrapper are being pushed way down due to the height of unleash being incorrectly calculated. I am not sure if this is indicating a bigger problem because the plugin may not be initializing properly? If you get a chance take a look and let me know what you think could be going on. The XYZ columns should be right against the bottom of Unleash, and at some points when resizing, they are correct, but most of the time they are not.
Thanks again for your time and help, it is much appreciated.
Also, after taking a look at the plugin code, since I have the option for slideshow set to false, that’s why the loader isn’t being appended automatically. But that causes a JS error if the loader div isn’t present.
sorry for being late, have’t checked the comments for a while, concerning your question, do you mean a situation like this: http://gyazo.com/033c4ad787f5dc063562602b618e14a4 ?
Great script and excellent assistance via email. Very fast and helpful.
Great, great user!
Will this work with Genesis (Studiopress) themes?
Thanks for a very nice plugin. I have one issue that I can’t figure out. I have the slider set to start with the first slide open which it does perfectly. But if I resize the viewport at all (including opening firebug or Chrome inspection tools) the open slide shrinks back down to the same width as the others.
Forgot to mention, I was using version 1.2. I upgraded and things went quite crazy so I went back to 1.2 and added an window resize function. Wondering if there is a better way.
$(window).resize(function() { $( ”.unleash-box.featured” ).click();//click the active slide });
Is there an easy way to change the code so that the images are stacked and slider opens from the right side instead of the left?
I’m making big update currently and I’ll consider doing this, thanks for that good suggestion
seems like alialaa disappeared like 5 month ago. And now we don’t have any support.
sorry guys I’ve been so busy for a while, currently I’m working on an update for this plugin that will hopefully solve all your problems.
First time using jQuery and I have an ancient memory of Java coding . . . for this plugin, are you stating that I need to download jQuery and take the other two files and place them? Where would I place them?
My step-by-step understanding of this installation/set up is limited. Excited to want to use it because I bought it. Then . . . where do I edit that coding? In a coding program or right in Wordpress (which is where I’m taking the slider to)??
I really cannot get this plugin to work on my Wordpress page. Is there someone out there who can help me fix this?
Thanks in advance
Hello – great plugin. Is there any way to choose the slide that you want auto loaded?
Thanks
So many pages of comments and no search capability on comments, so I may ask a question already asked and answered long ago: Why use an image of the code we must copy and paste? This is not helpful when all you have to do is type the code in so that we may use it, instead of having to download a graphic and reproduce it ourselves. This first step may keep people from using your code, which we purchased. Please make the code inside your index.html available.
Hello please help i love your work his really good. i was wondering how do i make the caption active on the image.
Example: the caption is visible when you hover on the image. but i also want the caption to be visible before you hover on image as well, how can i archive that. look forward to your reply thanks.
I guess this has already been requested, but I would like to see this autorotate where you can set the time interval to what you want.
Hi,
I purchased the plugin recently and am testing it. It works Without any issues on Firefox and IE8+ but there are issues with Chrome and Safari. Only the first 3 images work but they are very jittery. Link: www.pickmyprint.com
