Im using a combination of softwares to achieve a slideshow/lightbox/zoom and pan effect and have reached a barrier with the Panzoom module.
My code works like this, the server pre-loads the images that will go into the slideshow and on loading the page, the images are loaded into the carousel (Swiper). Then on clicking an image, the image is opened in a lightbox (GLightbox) and since the zoom function offered with that isnt accurate enough, I wanted to plugin a third software to allow scroll wheel zooming and panning.
HTML:
<div class="swiper mySwiper" id="mySwiper">
<div class="swiper-wrapper" id="load">
<% for(let img of images) { %>
<div class="swiper-slide d-flex align-items-stretch align-items-center justify-content-center"><img class="glightbox img-fluid" src='<%=img%>'style="height:100%;width:auto" data-zoomable="false" data-draggable="false"></div>
<% } %>
</div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
here is how Ive implemented the click event for applying the panzoom zoomWithWheel function:
$(document).ready(
()=>{
$('.glightbox').click(
()=>{
const elmt=$('.gslide-media img')[0];
console.log(elmt);
const panzoom=Panzoom(elmt);
$(elmt).on('wheel', panzoom.zoomWithWheel)
}
)
})
Pan seems to work fine but my problem now is the scrolling only zooms OUT the image in the lightbox. Help Please!
Related
I'm trying to set the start position in a fullscreen MaterializeCSS carousel. I want to use it as a gallery image viewer inside a fullscreen modal.
Once gallery image is clicked, the modal opens and the image slider should start at the clicked image. Inside the documentation of MaterializeCSS I couldn't find any important information for that.
Currently the carousel slides to the right image. I only want to delete the slide effect on start and activate it after viewing the first image.
Two of many images to open:
<div class="gallery-item-left col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-1" data-position="1" src="...path-to-image-1..." />
</div>
<div class="gallery-item-right col s12 m6">
<img class="responsive-img gallery-item" alt="gallery-image-2" data-position="2" src="...path-to-image-2..." />
</div>
...
My jQuery code
jQuery(document).ready(function($) {
$('body').on('click', '.gallery-item', function() {
var position = $(this).data('position');
$('#img-viewer-modal').modal('open');
$('#img-viewer-carousel').carousel({fullWidth: true, duration: 400});
$('#img-viewer-carousel').carousel('set', [position - 1]);
});
#img-viewer-carousel is simply the carousel id inside my modal.
I'm very thankful for every tip.
The only workaround I've found is to dynamicly change the content items of the carousel.
See example under https://www.codeply.com/go/EiubFqcKcg
Im using in my project angular 1.5.5 and Bootstrap v3.3.6
I want to have slider on my platform so I did use uib-carousel
This is my html code:
<uib-carousel active="active"
interval="wellcomePage.myInterval"
no-wrap="wellcomePage.noWrapSlides"
no-pause="true">
<uib-slide ng-repeat="slide in wellcomePage.slides track by slide.id" index="slide.id">
<div class="slajd" ng-style="{height:wellcomePage.pageHeigth+'px','background-image':'url({{slide.image}})'}">
<div class="intro">
<div class="intro-body">
<p id="intro-text">{{slide.title}}</p>
<p id="intro-text-italic">{{slide.teaser}}</p>
</div>
</div>
</div>
</uib-slide>
</uib-carousel>
and this is my angular wellcomePage.slides:
wellcomePage.slides = [
{
id:0,
image: "/img/wellcomepageSlides/hello1.jpg",
title: "Yo",
teaser: "Hi there"
},
{
id:1,
image: "/img/wellcomepageSlides/hello2.jpg",
title: "Wellcome",
teaser: "Be good"
}];
The first problem is that when I open my page the first time an image is loading from top to down and slider is loading like this:
The second problem is when i push arrow > to slide i see something like this, and that it take while to load image from top to down:
What I have already tried:
Image preload using ionic.ion.imagecachefactory, I have used it like they said here https://github.com/andrewmcgivery/ionic-ion-imageCacheFactory Images are preloading but what I see on slider is not changeing.
I have also tried preloading from here http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm
I thought that it coud be my dybamic window height height:wellcomePage.pageHeigth, I have set it to static 500px in html but it didn't helped.
I have tried set 'background-image':'url({{slide.image}})' as 'background-image':'url(/img/wellcomepageSlides/hello1.jpg)' but it also didn't help
And I have no idea what is wrong, can any body help me, please?
I'm using PJAX for a project.
I have a container called #icerikAlani to load its content with PJAX.
Here is the basic layout:
<div class="container" id="icerikAlani" data-pjax-container>
<!-- NIVO SLIDER -->
<div class="row">
<div class="col-md-8">
<div id="slider" class="nivoSlider"> SLIDER CONTENT HERE... </div>
</div>
</div>
<!-- SCROLLING LOGOS -->
<div class="row">
<div class="col-md-12">
<div id="logoParade"> SCROLLING LOGOS HERE... </div>
</div>
</div>
</div>
This container has two other script tags in it which are for Nivo Slider and Smooth Div Scroller plugins.
The problem is, when I navigate to a page and return to homepage, script tags stop working.
I tried to solve this problem by using pjax:end statement but I couldn't make it work, then I tried pjax:success as below bu still no luck. (as I read here: Where to put the page-initialize javascript when using pjax?)
Is there a way for using these scripts without reloading the page?
This is the script about PJAX and Smooth Div Scroller script:
<script type="text/javascript">
$(document).pjax('a','[data-pjax-container]', { fragment: "#icerikAlani" } );
//THIS IS HOW I ACTIVATE PJAX
$(document).on('pjax:beforeSend', function() {
$('#icerikAlani').fadeOut(50);
});
//WORKS...
$(document).on('pjax:end', function() {
$('#icerikAlani').fadeIn(400);
});
//WORKS...
$(document).on('ready pjax:success', function() {
$("#logoParade").smoothDivScroll({
autoScrollingMode: "always",
autoScrollingDirection: "endlessLoopRight",
autoScrollingStep: 1,
autoScrollingInterval: 25
});
//FAILS...
});
</script>
You can check the full code here
Because I'm not experienced about javascript, this problem stands like a wall against me before finishing the project. Hope to find something works both with the slider and the scroller.
Possibly your script causes an error.
Try Firefox and Firebug and see if you find something...
Scenario:
I have stacked (layered) images that represents various part of the image.
Two there transparent png together makes a product. I am changing particular png images based on dropdown. So user can customize the product.
Problem:
Now what I want is to implement product zoom functionality into this. All jquery plugin I have found so far is based on single image.
How to I implement the image zoom functionality that doesn't take a single image to zoom it but perhaps the whole container of stacked images?
[edit]
What I have tried so far:
I have tried Anything Zoomer jQuery Plugin but it didn't work. You can see it here. The code I used to implement is below.
HTML
<div id="image-canvas">
<div class="small">
<div data-filter="filter1" class="layer layer1"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png"></div>
<div data-filter="filter2" class="layer layer2"><img alt="smaller" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">/div>
</div>
<div class="large">
<div data-filter="filter1" class="layer layer1"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd.png"></div>
<div data-filter="filter2" class="layer layer2"><img alt="larger" src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000.png"></div>
</div>
</div>
JS
$("#image-canvas").anythingZoomer({
smallArea : 'small',
largeArea : 'large',
});
Note:
Transparent PNG's are absolute positioned.
You can use the panzoom library.
Include it in your header and add a div with an id that you can later reference with the panzoom functions.
HTML
<div id="panzoom">
<img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/rohr-66dddd-266x400.png">
<img src="http://kowsky.projekt.dealux.de/wp-content/uploads/2013/09/ergo-griff-000000-266x400.png">
</div>
<div>
<button class="zoom-in">Zoom In</button>
<button class="zoom-out">Zoom Out</button>
<input type="range" class="zoom-range">
</div>
jQuery
$('#panzoom').panzoom({
$zoomIn: $(".zoom-in"),
$zoomOut: $(".zoom-out"),
$zoomRange: $(".zoom-range")
});
I am using JS based Drag Slider DragDealer. The slider div is placed in a content slider that runs using jQuery. The Drag Slider works as long as its parent div is not animated to move to left by 200px.
Fiddle: http://jsfiddle.net/gentrobot/9b5Xg/3/
HTML:
<div style="position:relative;width:400px;height:100px;overflow:hidden;">
<div id="1" style="width:200px;float:left;position:absolute;left:0px;">
Test
</div>
<div id="2" style="width:200px;float:left;position:absolute;left:200px;">
<!-- Drag Slider div starts -->
<div id="my-slider" class="dragdealer">
<div class="red-bar handle">drag me</div>
</div>
<!-- Drag Slider div ends -->
</div>
</div>
Click to slide
jQuery(other than JS for Dragdealer):
$('#clk').click(function(){
$('#1').animate({left:'-200px'});
$('#2').animate({left:'0px'});
});
It works if you drag it to the right long enough, where it used to be before.
What you can have though is specifying a callback parameter that reinitializes the thing.
$('#2').animate({left:'0px'}, function(){
new Dragdealer('my-slider');
});
Normally you should append the element back again to avoid having the same listeners more than once. This is influenced by the way the plugin was written but you can do it like this just to be on the same side.
$('#2').animate({left:'0px'}, function(){
var t = $(this);
var random_placeholder = $('<div></div>').insertBefore(t);
$(this).insertAfter(random_placeholder);
random_placeholder.remove();
new Dragdealer('my-slider');
});