kthornbloom / smoothproducts Goto Github PK

Very nice light and nice script! However, it does not work in Internet Explorer and Firefox. The large thumbnail does not show. Any fix for this problem?

hello,

I tried to use plug in but it doesn't seems to work with the latest jquery.

I used:

$(window).on('load', function() {
$('.sp-wrap').smoothproducts();
});
in script tag

Use:

$(window).on('load', function() {
$('.sp-wrap').smoothproducts();
});

Instead of:

$(window).load( function() {
$('.sp-wrap').smoothproducts();
});

Our users are requesting that they be able to click anywhere on the screen to zoom out if they are currently zoomed in on the product.

Image illustrating cursor click positions that would allow the image to zoom out.

Here is Javascript I added to smoothproducts.js that allowed me to implement what I'm requesting.

Summary of what I did:
Added two variables sp_zoomed_in and click_count
Set those variables under 'Zoom In' and 'Zoom Out'
Added $(document).click(function (event) {...} that registers clicks anywhere on the page, and zooms out if the click_count >=2 and the user is currently zoomed in.

Whether this is the best way or not I do not know. I just know that it is working for me.

var sp_zoomed_in = false;
var click_count = 0;

// Zoom In
$(document.body).on('click', '.sp-large a', function (event) {
    var largeUrl = $(this).attr('href');
    $(this).parent().parent().find('.sp-large').append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
    $(this).parent().parent().find('.sp-zoom').fadeIn();
    $(this).parent().parent().find(".sp-zoom").draggable();
    $(this).parent().parent().prepend('<div class="sp-full-screen"><a href="#">↕</a></div>');
    sp_zoomed_in = true;    // set flag
    click_count = 0;        // reset click count
    event.preventDefault();
});

// Zoom Out
$(document.body).on('click', '.sp-zoom', function (event) {
    $(this).parent().parent().find('.sp-full-screen').fadeOut(function () {
        $(this).remove();
    });
    $(this).fadeOut(function () {
        $(this).remove();
    });
    sp_zoomed_in = false;   // not zoomed in anymore
    click_count = 0;        // reset click count
});

/* if zoomed in zoom out on click anywhere */
$(document).click(function (event) {
    click_count += 1;
    // click_count requires at least two clicks since the first click might be to zoom in
    if (click_count >= 2 && sp_zoomed_in) {
        $('div.sp-full-screen').remove();
        $('div.sp-zoom').remove();
        sp_zoomed_in = false;   // not zoomed in
        click_count = 0;        // reset click count
    }
});

Is there an option to disable lightbox fullzoom on click?

Many thanks for the code, really appreciated!

Is there a way to captions under the thumbnails and in the lightbox?

please add arrow key change images.

thanks

Some users do not know that they can click to close the photo. These users first try to use the keyboard escape key or other key to close the sp-lightbox image.

Consider adding some javascript like:
$(document.body).keydown(function (event) {
$(".sp-lightbox").fadeOut(function () {
$(".sp-lightbox").remove();
})
});

This would allow the user to press any key, as well as, be able to click.

Is there a way to make full zoom light box to work in a loop without stop at the last image?

Wouldn't it be great with zooming capabilities on touch devices? At least I think it's a draw back that you can't view image details if you're using a touch device. Touch devices usually have small screens, which could benefit from a zoom function more so than on desktop devices. I did tests on a Win 10/Edge touch tablet and a iPhone 6 with latest iOS.

Another, small UI thing. When you touch outside the lightbox it should close the lightbox, same behavior as on desktop. This should be fixed. It works on my Win tablet but not on iPhone.

This is a great little script overall, many thanks!

Hi,
When I add <script type="text/javascript" src="js/jquery-2.1.3.min.js"></script> in my footer the Smoothproducts script is working but my menubar (navbar) is not working when I add "jquery-2.1.3.min.js"

See the differences:
http://#/p/p.html (with out "jquery-2.1.3.min.js" Smoothproducts is not working)

http://#/p/p1.html (with "jquery-2.1.3.min.js")

Hope that you can help me

Please add the close button to the lightbox

Hello, Thank's for this nice and simple library.
I need to know how can I set max height like the max-width property ?
Also is it possible to fix height and width of library ?

Hi, thank for your plugin.
I want use two or more sp-wrap in one page but it not work correctly.
please help me.

This is not touch friendly. Can it be made touch friendly for mobile?

hello,

I tried you plug in but it does'nt seem to work with the latest jquery.

Thanks for a great image viewer.
To be able to navigate the zoomed image on iOS, I had to use the 'smoothproducts.js' and not the 'smoothproducts.min.js'. The tilt panning is a cool but less intuitive solution for navigating the zoomed image. A tap-drag approach would likely interfere with scrolling on the page. What about zooming the tapped area or pan buttons as an alternative? Just a suggestion.
Keep up the good work!

If the filename or the path contains the ")" character, the image doesn't show because the thumb element have the style attribute as this:
<a href="... " style="background-image: url(http://mydomain.com/path/filenamewith).jpg)" ...

This could be resolved adding the ' delimiter before and after the image path:
<a href="... " style="background-image: url('http://mydomain.com/path/filenamewith).jpg')" ...

So you can modify the row 36 with this:
$(this).parents('.sp-wrap').find('.sp-thumbs').append('<a href="' + large + '" style="background-image:url('' + thumb + '')"'+classes+'>');

Hope it helps.

Hi,

I need to show a title of the selected image when any of the images are clicked. I tried adding a data attribute to the anchor tag, but it gets lost when the transferred into the smooth Products component.

So a couple of possible feature requests:

• Allow the display of a title above/below the main image for the selected image
• Allow adding extra attributes to the anchor (like the "data-" attribute
• Adding an OnImageSelected callback to allow for custom JS calls

I'f I get the chance to do a proper implementation, I'll submit a pull request, but swamped at the moment, so I might have to just implement a workaround.

What method i hove to use for outer zoom

Firstly , thanks for your great library.
Then I have a question about the lightbox.
How do I make the image full width in the lightbox ? (Adding scroll if height is larger than screen)

Thanks and regards

Mostly plugin works perfectly but some times then click on thumbnail it jump down scroll. How fix it?

I embedded the script in Joomla3 but the zoom is behaving strange. Any idea why?

Here is the link to the page:
scoomadesign(dotcom)/lift/index.php/productos/calidad-lift

Thank you!

Hi there, i like your work, however i have a issue with this plugin..

it works on some images, on other it doesnt.. if i hover in the corner.. it works somehow..

have look here:

http://smig.creadiv.at/product_info.php?products_id=372

and here it works... o.O

http://smig.creadiv.at/product_info.php?products_id=408

and in your js files you have one dot to much line 44 addClass('.sp-current-big')
;)

thanks for help

First, nice plugin!

I have a jquery mobile project that is trying to use your plug in. I followed the docs for installation and it works perfectly the first time. However, If I back out of the page and then re-enter the page with the viewer on it it glitches out. Basically, when you click a thumbnail the main image disappears for a second then comes back and then the whole viewer refreshes itself.

At first I thought I was calling the 'smoothproducts()' method on the same html code multiple times was causing the problem but it's fresh uninitialized html every time I go to that page. Only the smoothproducts js code remains in memory which is called multiple times on fresh html. When I do a complete refresh of the app with all new js loads, your plugin works fine on the first try.

Do you have an idea what the problem might be? Is the plugin not initializing properly on the second call? Maybe some left over button click handlers?

More Info:
I can see in chrome tools for a split second that the 'display:block' in the below line changes to 'display:none' for a split second when I click a thumbnail. This only happens on the second initialization of the smoothproducts() method. The width and height style also are react differently.

<script type="text/javascript">
    /* wait for images to load */
    $(window).load( function() {
        $('.sp-wrap').smoothproducts();
    });
</script>

no work with jquery 3 bellow code work

<script type="text/javascript">

$(window).on('load', function() {  $('.sp-wrap').smoothproducts(); });
 
</script>

In the css:
html, body {
height:100%: width:100%;
}

Shouldn't there be a ';' after the first 100%?

Hi there,

I am trying to add a zoom out on mouseout function but it doesn't seem to be working, any help would be appreciated. I have currently added the following code after the existing zoom out function:

        $('.sp-large').mouseout(function() {
            $('div.sp-full-screen').remove();
            $('div.sp-zoom').remove();
        });

Thanks!

hi
i have this issue, i have downloaded the file and uploaded to my hosting. the images are loading in every devices but not on ipad. the loading image is showing on ipad but not the others.
here is the link of it

http://listing.aphilatelicoutlet.com/ebay/sp/

could anyone please tell me what is the solution for it?

thanks in advance
/koustab

Great plugin by the way.

I don't know if it's a problem with the way I've implemented this or what but I'm using this on a page which gets updated with a call to ajax. This triggers the jquery to re-execute and the css is replicated. I've managed to get round this by adding
var slideTiming = 300
if ($('.sp-large').length == 0) {
// your code in here
}
so that the code only gets executed if it hasn't already been. I'm sure there must be a better way to do this but I don't really know jQuery!

Is there any way to load the "small images" - background images after the dom is load ?
The problem here is i cant use something like lazyload on it and a large number of images end up in slow page load.

Something like:
<a href="images/1.jpg"><img src="images/1_tb.jpg" alt=""></a>
->
<a href="images/1.jpg"><img data-src="images/1_tb.jpg" alt=""></a>

~

var thumb = $('img', this).attr('src')
firstThumb = $('img', this)[0].src

->

var thumb = $('img', this).data('src')
firstThumb = $('img', this).data('src')

...

You can use
$(document).ready(function(){
instead of
$(window).on('load', function() {
then

Hey, I thought I would start a new thread on this issue.

The lightbox feature is not working with jquery mobile. When you click on the large image nothing happens. However, if I then back out of my page the lightbox shows the image for a couple of seconds then disappears.

I believe it has something to do with how you append the lightbox to 'body'

$('body').append('

jquery mobile does several html enhancements that is incompatible in how your plugin operations.