Code

Discussion on Jquery Slider Zoom In/Out Effect Fully Responsive

Discussion on Jquery Slider Zoom In/Out Effect Fully Responsive

Cart 3,475 sales

LambertGroup supports this item

Supported

This author's response time can be up to 1 business day.

387 comments found.

Hi, I use 8 images with fullwidth, slideshow is starting before the images finished loading, is there any way to use “loading dummy” before starting the slideshow, or lazy load images etc.

Thanks

Hello,

Lazy load is not available but you have a parameter ‘myloaderTime’ which can delay the slider loading

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
  skin: 'opportune',
  responsive:true,
  width100Proc:true,
  width: 1920,
  height: 600,
  thumbsWrapperMarginTop:25,
  myloaderTime:8
});    

Please check help documentation, ‘JS Options’ section, to see all available parameters

Regards

Great! worked for me, Thank you

Hello,

If I purchase this plugin will I be able to: - insert a video as one of the slide (the other slide will be regular images) ? - have the video autoplay (youtube autoplay=1 param) ? - automatically pause or stop the video when I pass the slide (by clicking on the right or left arrow) ? - automatically go to the next slide at the end of the video ?

Hello,

The product doesn’t have this option. We’ve just launched a new product which can do what you need: http://codecanyon.net/item/youtube-and-vimeo-video-player-with-playlist/7964882

Regards

for the fullwidth slider, how can I get the text animation to center ? the pixel offset from top and left wont work, as I am dealing with different length text.

Hello,

The text is centered using the left & top positioning. If you don’t know the text length, this is not possible

Regards

When window height only is changing – bg dosent resize. Happens something like this: http://i59.tinypic.com/wqoj69.png Tested on majesticFullScreen.html Steps: resize bigger,resize smaller and then resize taller in height. Happens across all browsers. Seems its affecting only height changes :/

Plugin settings: jQuery(’#bannerscollection_zoominout_majestic’).bannerscollection_zoominout({ skin: ‘majestic’, responsive:true, width: 2500, height: 1570, width100Proc:true, height100Proc:true, showNavArrows:false, showBottomNav:false, autoHideBottomNav:true, thumbsWrapperMarginTop: -135, pauseOnMouseOver:false, setAsBg: true, showCircleTimer: false });

Hello,

The resize function is triggered only on browser width is changed

Regards

Tnx for answer. Overall great plugin.

http://www.zoompanningeffectslider.com/zoomFullScreen_opportune_slide.html

is it possible to turn off the zoom and also is it possible to not have the thumbnails or the bullets?

:)

c

Hello,

Yes, you have parameters for these.

Regards

Hi, I have a display issue. When the page is first loaded or refreshed, the image does not load, but I can see the timer. Once the timer is done, I see the first image for a second, then the next image loads. After that it works fine.

Using Opportune basic, fade, no Ken Burns.

Hello,

Please send me on office@lambertgroup.ro the link where you have the slider, to take a look

Regards

Is it possible to destroy this slideshow, As I am loading different slide show through ajax and every time I load new Slide all the events get registered again

Can you please suggest how may I destroy the running slides and start a new one.

Hello,

Only if you’ll use an iframe and change the src with a different file

Regards

Then its no more response :(

Which option may I use not to display the thumnails.

I don’t need thumbnails, but unfortunately can’t find any options.

Hello,

You can set showBottomNav: false and showOnInitBottomNav:false when you initialize the slider

jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
skin: 'opportune',
width: 960,
height: 400,
showBottomNav: false,
showOnInitBottomNav:false
}); 

Please check help documentation, ‘JS Options’ section, to see all available parameters

Regards

I am having problem with the image size.

The first image is displayed correctly and the effets are also great. but from the second image the image height and with is set to 0 in style. Thats why can’t see any image after the first one.

Hello,

It might be a JS or CSS conflict on your website. Maybe you have a general definition in your css files for img tags with height:auto

Please send me on office@lambertgroup.ro the link where you have the slider, to take a look

Regards

Hi. anybody have tried randomise images?.

Thank you.

I just noticed that the position of the text is all over the place depending upon the browser dimensions. I set my final text position up so that with a normal desktop size window, the text is pretty much centered in the browser. When I change the browser size to look like an iPhone, the text moves way up to the top and becomes very small. It moves so far up it is on top of my logo. If I make the browser look like an iPhone in landscape, it moves to the bottom or even off of the page. No need for me to send you a link, your demos do it too.

Is there a way to change the final text parameters using something like a series of ”@media screen and (min-width: 680px)”? I could have different set ups for certain screen sizes. Can this be done with css using a class on the controlling text div?

Thanks

Let me see if I can make my last post a bit clearer.

You said, “If you need to position some elements over it (and the position is mandatory) you should add those elements from your website.”

The elements that I want to add are text titles and tag lines. These titles and tag lines change depending upon the picture that the slider is showing. I don’t know how it is possible to do this from my web site since my website has no knowledge of what picture is currently being shown, when it is getting ready to fade out, and what the next picture will be. If there is a way of sending this info from your jquery back to my code, please tell me, I would be glad to do this on my end. Although, I think this would be ridiculous since you already have all this in your code and just needs a minor tweaking.

Regarding “the position is mandatory”, I’m not asking for that much. I’m just asking that the text always lands in approximately the same location (say within + or – 15% of where I put it, relative to the browser size) and doesn’t fall off the page under certain browser sizes. Don’t you see a problem with this? I would think you would be interested in improving this negative aspect of your product. This is suppose to be a responsive slider and therefore the text shouldn’t fall off the page when someone is viewing the website with an iPhone turned sideways.

I really don’t see how this would be a hard fix if you switch over to percentages of the browser height and width as I stated in one of my replies. Please reconsider this improvement that I think you really need to do.

Thank you!

Hello,

As I said in the previous replies, this is not possible for FullScreen version due to the fact that the proportions are very different between landscape mode and portrait mode.

The FullScreen version was not built for this type of usage. It was built to be used as a full-screen background or a full-screen gallery.

Regards

Yes, but you allow captions and text in this mode. And the captions and text are running off of the page!!!

This may have already been discussed but I can’t find it. Is there anyway of keeping the first image from viewing until it is completely loaded. I would rather see nothing than to watch the first image load from top to bottom when the site opens up. Thanks

Hello,

When you initialize the slider, you can set a larger value for ‘myloaderTime’ parameter. It will still show the image loading but it gives a larger delay time

Regards

Hi,

On http://www.silba.net/apartmani-i-sobe-babic/ when I click on ‘Fotografije’ (footer section) thumbs don’t show up. On this page, and several others, I use Quform plugin for WordPress. On pages where Quform are not used, thumbs are visible.

Can you help me? Calling jQuery’s scripts problem? Or something else)

Thank you in advance.

Hello,

You need to respect the WordPress rules and load jQuery as presented here http://digwp.com/2009/06/including-jquery-in-wordpress-the-right-way/

Regards

You are right, but it doesn not cose any errors on the page…and is working in other browsers… You are correct the photos are loaded in DOM through slider…but you already pounted that out..slider is also using JQUERY UI but different version…any help is apreciated…

Hello,

I’m sorry, but we can’t offer support for third-party modifications to our product.

Also, the WordPress theme needs to respect WordPress rules.

Regards

Hi, i have 2 problems 1. One slider on page – working OK – http://nowa.domatoria.pl/index.php?id=2

But 2 sliders on same page (with differents id) are not working as expected http://nowa.domatoria.pl/index.php?id=5

Look at the first slider, first loop of 3 images is ok, but from the second loop zoom is changing – we don`t want it. When the second slider is turned off, the first is working OK.

2. Look at this page http://nowa.domatoria.pl/index.php?id=1

in top left corner there is an icon, when clicked – menu slides from left. Bur after first loop of 3 images in main slider, menu does`t slide.

Hello,

1. I’m sorry, I don’t understand. It looks ok for me.

2. If you want to use the slider as full screen background, you need to insert the slider code just after body tag. Also, set the parameter setAsBg: true when you initialize the slider. Please check help documentation, ‘How To Use It As FullScreen Background’ section.

Regards

P.S. please send me on office@lambertgroup.ro a screenshot with the problem you have on point 1.

Hi, Pls. can you explain me HOW to remove the loading circle in the right hand topcorner what loads the images.

Only hiding it (so that you can NOT see it anymore)

Thanx a lot! :-)

Hello,

Just set showCircleTimer:false when you initialize the slider.

            jQuery('#bannerscollection_zoominout_opportune').bannerscollection_zoominout({
        skin: 'opportune',
    width: 960,
    height: 400,
    showCircleTimer:false
});    

Please also check help documentation, ‘JS Options’ section, to see all available parameters

Regards

Hallo, I’ve viewed this demo: http://www.zoompanningeffectslider.com/index_zoom_opportune_slide.html and in my browser (FF latest) it doesn’t react responsively. What about this? Regards – Ulrich

Hello,

We’ve tested the product with the latest (approved) FF version 28.0 and it works http://www.zoompanningeffectslider.com/zoomResponsive_opportune.html

Regards

Yes, you are right. In the meantime I found the responsive demos too and bought the script.

hi, thank for your great job, i have 2 questions: 1. how to change the dimension of thumbnails (majestic skin) 2. how to use 2 or 3 same sliders on one page

Hello,

1. In this file bannerscollection_zoominout.css you’ll modify the height (and width) for these classes:

.bannerscollection_zoominout.majestic .thumbsHolderWrapper {
    position:absolute;
    height:135px;
    width:100%;
    overflow:hidden;
    padding:0;
    z-index:2;
}
.bannerscollection_zoominout.majestic .thumbsHolderVisibleWrapper {
    position:absolute;
    width:100%;
    height:135px;
    overflow:hidden;
}
.bannerscollection_zoominout.majestic .thumbsHolder_ThumbOFF {
    float:left;
    display:block;
    width:107px;
    height:60px;
    cursor: pointer;
}

2. You can use as many sliders as you want, just make sure each slider has unique ID

Regards

Why can’t you set initialZoom as 0?

Hello,

The recommended value for initialZoom or finalZoom is between 0.5 and 1.

You can set the value for initialZoom 0.1 or 0.01

Regards

But then it appears very small on the page.

Hello,

You wanted to have initialZoom=0.

If you don’t want a small image, set initialZoom=0.85

Regards

Wow! Really great template…:-) – 5 stars!!! And many thanx for your quick support and friendly help!

Earlier in this thread was this comment:
farhadnik PURCHASED 11 months ago Hi, Can i display multiple slides on same page? Tnx LambertGroup LambertGroup AUTHOR 11 months ago Hello,

Yes, you can insert multiple instances on the same page. Just use unique IDs for each instance

Can you provide a code sample of this?

In my scenario I want to display 4 images something like this:

Image 1 comes in, text is added over the image. After 10 seconds:

Image 2 comes in on top of Image 1. Image 2 is narrower than image 1, so I’m thinking that i have to save it as a PNG with transparent space over where image 1 will be.

After about 5 seconds, image 1 and 2 fade out, then:

Image 3 comes up, followed by image 4 after a few more seconds, over image 3 similar to how 2 overlays 1.

The text remains on top of everything.

Clear as mud?

Thanks,

Hello,

‘Multiple instances’ means multiple sliders on the same page.

What you want can’t be obtained with our slider

Regards

Thank you for your very quick reply. Do you think I could achieve an approximation of that effect using 4 separate slides?

BTW – I love this slider, the amount of control I have over it is amazing.,

Hello,

I’m sorry, the slider doesn’t support this type of usage.

All that our product can do is presented in the preview demo.

Regards

by
by
by
by
by
by

Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey