The first Image is duplicating.
After clicking on target which is an image, Photo1 displays twice before Photo2 and Photo3.
script:
<script type="text/javascript">
$(document).ready(function(){
$(".fancybox5")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'elastic',
prevEffect: 'fade',
nextEffect: 'fade'
});
});
</script>
html markup:
<div>
<a class="fancybox5" href="#inline5"> <div id="pics"><img src="images/pic.png" width="165" height="167" alt="Pics" border="0" /></div></a>
<div id="inline5" style="width:100%;display: none;">
<a class="fancybox5" href="media/photo3.jpg"><img src="media/photo3.jpg" width="400" height="500" /></a>
<div class="hidden">
<a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a>
<a class="fancybox5" href="media/photo2.jpg"><img src="media/photo2.jpg" width="400" height="500" /></a>
</div>
</div>
</div>
You don't need to target the inline content neither you have to use thumbnails inside the hidden div. Target the first picture in your visible link only so tweak your html this way
<div>
<a class="fancybox5" href="media/photo1.jpg"><img src="media/photo1.jpg" width="400" height="500" /></a>
<div id="inline5" style="display: none;">
<a class="fancybox5" href="media/photo3.jpg"></a>
<a class="fancybox5" href="media/photo2.jpg"></a>
</div>
</div>
and this script should work
$(document).ready(function () {
$(".fancybox5")
.attr('rel', 'gallery')
.fancybox({
openEffect: 'elastic',
prevEffect: 'fade',
nextEffect: 'fade'
});
});
Related
Does any one know how to make a conditional hide with amp-selector in email? on buttons like these? So I have 3 of these buttons next to each other, menu 1, menu 2 and menu 3. So if I click menu1, I only want the content to show that links to menu 1.. If I click menu2 I want to only show the content from menu2 and so forth.
<table>
<tr>
<th on="tap:menu1.hide;tap:menu1.toggleVisibility" class="bg-indigo-500 hover:bg-indigo-600 rounded" style="mso-padding-alt: 12px 48px;">
<a class="block text-white text-sm leading-full py-12 px-48 no-underline">Menu 1</a>
</th>
</tr>
</table>
<amp-selector id="menu1" layout="container" hidden>
<amp-selector id="hide1" layout="container" name="single_image_select" >
<ul>
<li>
<p option="1" select> MENU1 </p>
</li>
<li>
<p option="2" hidden> HEJ2 </p>
</li>
<li option="na" disabled>None of the Above</li>
</ul>
</amp-selector>
</amp-selector>
You can use actions and events in AMP Email to achieve this. See this URL for detail.
Below is a tested code for the same:
<!doctype html>
<html ⚡4email>
<head>
<meta charset="utf-8">
<script async src="https://cdn.ampproject.org/v0.js"></script>
<script async custom-element="amp-list" src="https://cdn.ampproject.org/v0/amp-list-0.1.js"></script>
<script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script>
<script async custom-element="amp-selector" src="https://cdn.ampproject.org/v0/amp-selector-0.1.js"></script>
<script async custom-element="amp-bind" src="https://cdn.ampproject.org/v0/amp-bind-0.1.js"></script>
<style amp4email-boilerplate>body{visibility:hidden} </style>
<style amp-custom>
/* any custom styles go here. */
.hideme {
visibility:hidden
}
</style>
</head>
<body>
<button value="menu1" on="tap:menu1.toggleVisibility,menu2.hide,menu3.hide">menu1</button>
<button value="menu1" on="tap:menu2.toggleVisibility,menu1.hide,menu3.hide">menu2</button>
<button value="menu1" on="tap:menu3.toggleVisibility,menu1.hide,menu2.hide">menu3</button>
<div id="menu1">
<h3>
Menu1
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu2" hidden>
<h3>
Menu2
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
<div id="menu3" hidden>
<h3>
Menu3
</h3>
<amp-list
width="auto"
height="100"
layout="fixed-height"
src="https://preview.amp.dev/static/inline-examples/data/amp-list-urls.json"
>
<template type="amp-mustache">
<div class="url-entry">
{{title}}
</div>
</template>
</amp-list>
</div>
</body>
</html>
Working Example in AMP Playground
I'm using Fancybox v3.5.4 and Owl carousel v2.3.4 with lazyLoad option
When we click on a photo, Fancybox makes the photo pop up. Then if we click on "Next" few times to get the next photos on Fancybox and then close it, the photos on the owl carousel have disappeared.
It seems that the carousel has changed its background position and displays photos not loaded yet because of the lazyLoad option. Does anyone understand what is going on here? I spent lot of time on this.. Thank you
You can see an example here:
https://codepen.io/Philippe_12/pen/bOVOrK
$('.owl-carousel').owlCarousel({
items: 4,
loop:true,
pagination: false,
slideSpeed: 700,
paginationSpeed: 700,
rewindSpeed: 700,
lazyLoad: true
});
$().fancybox({
selector : '.owl-item:not(.cloned) a',
hash : false,
thumbs : {
autoStart : true
},
buttons : [
'zoom',
'download',
'close'
]
});
.img_container{ width:50%}
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.4/jquery.fancybox.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<h2>fancyBox v3.2 - OwlCarousel2 lazyLoad</h2>
<div class="img_container owl-carousel owl-theme">
<a href="https://placehold.it/350x250&text=1" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=1" alt="">
</a>
<a href="https://placehold.it/350x250&text=2" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=2" alt="">
</a>
<a href="https://placehold.it/350x250&text=3" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=3" alt="">
</a>
<a href="https://placehold.it/350x250&text=4" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=4" alt="">
</a>
<a href="https://placehold.it/350x250&text=5" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=5" alt="">
</a>
<a href="https://placehold.it/350x250&text=6" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=6" alt="">
</a>
<a href="https://placehold.it/350x250&text=7" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=7" alt="">
</a>
<a href="https://placehold.it/350x250&text=8" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=8" alt="">
</a>
<a href="https://placehold.it/350x250&text=9" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=9" alt="">
</a>
<a href="https://placehold.it/350x250&text=10" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=10" alt="">
</a>
<a href="https://placehold.it/350x250&text=11" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=11" alt="">
</a>
<a href="https://placehold.it/350x250&text=12" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=12" alt="">
</a>
<a href="https://placehold.it/350x250&text=13" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=13" alt="">
</a>
<a href="https://placehold.it/350x250&text=14" data-fancybox="images">
<img class="owl-lazy" data-src="https://placehold.it/350x250&text=14" alt="">
</a>
</div>
Looks like that issue is caused by "place-focus-back" feature of fancybox and you can disable that by adding backFocus : false while initializing.
Another issue that you might not have noticed is that you have initialized fancybox on "non-cloned" items only. That means, if you swipe enough and click on one of cloned slide, fancybox will start with default options (because clones will have data-fancybox="images" attribute, too). There is a sample of solving this issue for other slider - https://fancyapps.com/fancybox/3/docs/#faq-6 - but, you need a couple of tweaks for owlCarousel, because it does not add any attribute indicating what index each slide has.
Here is a possible solution - https://codepen.io/fancyapps/pen/yGYWNy?editors=1010 (note that I have removed data-fancybox="images" and added data-index attributes).
I am a newbie to ionic framework and I am using the carousel from this link "http://www.gajotres.net/how-to-create-elegant-slider-carousel-in-ionic-framework/".
I have to change the content of page according to the slides of carousel.
Here it is, may be it would help you :)
<div id="miniMizedCarousel" class="carousel slide" data-ride="carousel">
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<div id="textViewer" class="fluidMedia">
<div ng-switch-when="VIDEO" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<div xyz-video videocode="videoCode">
</div>
</div>
<div id="quizViewer" ng-switch-when="QUIZ" ng-bind="lessonContent">
</div>
<div id="Div2" class="fsContentArea" ng-switch-when="TEXT" ng-bind="lessonContent">
</div>
<div id="htmlViewer" class="lessonContentArea" ng-switch-when="HTML" ng-bind-html="lessonContent">
</div>
<div ng-switch-when="HTMLACTIVITY" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="htmlActivity" ng-src="{{lessonContent}}">
</iframe>
</div>
<div ng-switch-when="PDF" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pdfViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
<div ng-switch-when="PPT" ng-class="{'marBot45':fullScreen==true}">
<div class="loader">Loading...</div>
<iframe id="pptViewer" ng-src="{{lessonContent}}" frameborder="0">
</iframe>
</div>
</div>
</div>
</div>
<a class="left carousel-control {{carouselLeftBar}}" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true" ng-click="ShowPrevLesson()">
</span><span class="sr-only">Previous</span> </a>
<a class="right carousel-control {{carouselRightBar}}"
role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right right-arrow"
aria-hidden="true" ng-click="ShowNextLesson()"></span><span class="sr-only">Next</span>
</a>
</div>
I am using HTML2CANVAS to capture Div as Image and save to database.
Its working fine with images of 1-2 kb and text.
but unable to capture multiple and large images suppose 200-300 kb.
Please help help me out if anyone has face this issue and has solution.
Here is my Code:
<div id="target">
<page size="A4">
<div id="wrapper" >
<div id="header">
<div class="text">
<span id="rent">This Space for rent/price</span>
<h1 id="propAdd">THIS SPACE FOR PROPERTY ADDRESS</h1>
<h1 id="Data">THIS SPACE FOR DATA</h1>
</div>
</div>
<h1 id="ad">
This Space For advert heading</h1>
<div id="content">
<div class="main">
<div id="dvPreview2">
<img src="images/main-image.jpg" width="550" height="355" />
</div>
<h1 id="DES">This Space for Property Description or FEATURES</h1>
<ul>
<li id="DES1">4 Bedrooms, 3 Bathrooms</li>
<li id="DES2">Ensuite has double shower & double vanity</li>
<li id="DES3">Massive open plan living with cathedral ceilings</li>
<li id="DES4">Resort-style pool deck area</li>
<li id="DES5">Gourmet kitchen with butlers pantry</li>
<li id="DES6">Fully ducted air-con</li>
<li id="DES7">Triple lock-up garage with remote</li>
<li id="DES8">Outside pets considered on application</li>
</ul>
</div>
<div class="sidebar">
<div id="dvPreview3">
<img src="images/sidebar-image-01.png" width="159" height="100" />
</div>
<div id="dvPreview4">
<img src="images/sidebar-image-02.png" width="159" height="100" />
</div>
<div id="dvPreview5">
<img src="images/sidebar-image-03.png" width="159" height="100" />
</div>
<p id="dvPreview1" >
<img src="images/agent-logo.png" style="width:80px;" /></p>
<p style="margin-top:0 !important;">
Phone: <span id="phone">+49 30 47373795</span><br />
E-mail: <span id="mail">Ject41#cuvox.de</span><br />
<span id="web">www.abc.in</span>
</p>
</div>
<div class="clear"></div>
<div class="slid-img">
<div id="dvPreview6" >
<img src="images/image-01.jpg" width="159" height="100" />
</div>
<div id="dvPreview7" >
<img src="images/image-02.jpg" width="159" height="100" />
</div>
<div id="dvPreview8" >
<img src="images/main-image.jpg" width="159" height="100" />
</div>
<div id="dvPreview9" >
<img src="images/sidebar-image-01.png" width="159" height="100" style="float:right; margin:0" />
</div>
</div>
<div class="clear"></div>
</div>
<div class="affiliation-logo">
<ul>
<li><div id="dvPreview10" style="width:32px;"><img src="images/facebook-icon.png" width="32" /></div></li>
<li><div id="dvPreview11" style="width:32px;"><img src="images/twitter-icon.png" width="32" /></div></li>
<li><div id="dvPreview12" style="width:32px;"><img src="images/linkedin-icon.png" width="32" /></div></li>
<li><div id="dvPreview13" style="width:32px;"><img src="images/youtube-icon.png" width="32" /></div></li>
<li><div id="dvPreview14" style="width:32px;"><img src="images/google-plus-icon.png" width="32" /></div></li>
</ul>
</div>
<div class="clear"></div>
<div id="footer">
<div class="agent-section">
<%-- <div class="agent-name"></div>--%>
<span class="agent-name" style="float:left"> Disclaimer : </span>
<div id="DIS" style="max-width:550px; float:left; margin-left:10px; line-height:18px; font-size:14px;"></div>
</div>
<div class="clear"></div>
</div>
</div>
</page>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#add_button').click(function () {
html2canvas($('#target'), {
onrendered: function (canvas) {
var img = canvas.toDataURL()
img = img.replace('data:image/png;base64,', '');
//alert(img);
//window.open(img);
$.ajax({
type: 'POST',
url: 'Design1.aspx/UploadImage',
data: '{ "imageData" : "' + img + '" }',
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (msg) {
//alert('Image saved successfully !');
}
});
}
});
});
});
</script>
In file Html2Canvas.js on line 65
Change following line from
/* Highest positive signed 32-bit float value /
/maxInt = 2147483647, // aka. 0x7FFFFFFF or 2^31-1
to as Below
maxInt = Number.MAX_VALUE,
trick.
set your tag with and height is double of the output image size.
I am trying to add an image slider to my page but when scrolling left on the image slider, it causes the side menu to reveal itself as well. I still want the side menu to work on the page, just not in the div containing the image slider.
Below are the relevant files with some sections omitted for brevity. Basically, a page called clients.html is injected between the ion-nav-view tags in index.html. This clients page has a custom directive called img-slider, whose html is defined in directive.html. The image slider has a container "swiper container", and this is the container in which I want the side menu to be disabled. Any dragging events outside this div should still trigger the left menu.
In case it's relevant, the image slider uses a third party library called Swiper.
index.html
<!DOCTYPE html>
<html>
<head>
...
</head>
<body ng-app="starter">
<ion-side-menus>
<!-- Center content -->
<ion-side-menu-content ng-controller="menuCtrl as vm">
<div class="list">
<div class="item">
<a href="#/clients">
<i class="icon ion-person-stalker"></i>
Clients
</a>
</div>
<div class="item">
<a href="#/appointments">
<i class="icon ion-calendar"></i>
Meetings
</a>
</div>
<div class="item">
<a href="#/products">
<i class="icon ion-pricetag"></i>
Products
</a>
</div>
<div class="item">
<a href="#/sales">
<i class="icon ion-social-usd"></i>
Sales
</a>
</div>
<div class="item" ng-click="vm.logout()">
Disconnect
</div>
</div>
</ion-side-menu-content>
<!-- Left menu -->
<ion-side-menu side="left">
</ion-side-menu>
<ion-side-menu-content>
<ion-nav-view></ion-nav-view>
</ion-side-menu-content>
</ion-side-menus>
</body>
</html>
clients.html
<ion-view view-title="Commercial: Clients">
<ion-header-bar align-title="center">
<h1 class="title">Commercial: Clients</h1>
<div class="buttons">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</div>
</ion-header-bar>
<ion-pane>
<ion-content>
<img-slider></img-slider>
</ion-content>
</ion-pane>
</ion-view>
directive.html
<!-- Swiper -->
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
directive.js
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
$ionicSideMenuDelegate.canDragContent(false);
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());
I just modified your code by adding an ng-show tag it worked for me
<div class="swiper-container" ng-show="menu()">
<div class="swiper-wrapper">
<div class="swiper-slide">Slide 1</div>
<div class="swiper-slide">Slide 2</div>
<div class="swiper-slide">Slide 3</div>
<div class="swiper-slide">Slide 4</div>
<div class="swiper-slide">Slide 5</div>
<div class="swiper-slide">Slide 6</div>
<div class="swiper-slide">Slide 7</div>
<div class="swiper-slide">Slide 8</div>
<div class="swiper-slide">Slide 9</div>
<div class="swiper-slide">Slide 10</div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
and in directive.js file
(function () {
angular.module('starter')
.controller('directiveCtrl', ["$ionicSideMenuDelegate" , function ($ionicSideMenuDelegate) {
var vm = this;
//$ionicSideMenuDelegate.canDragContent(false);
$scope.menu = function(){
$ionicSideMenuDelegate.canDragContent(false);
return true;
}
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
slidesPerView: 3,
paginationClickable: true,
spaceBetween: 30,
freeMode: true
});
}])
.directive('imgSlider', function() {
return {
restrict: 'E',
templateUrl: 'app/directives/directive.html',
controller: "directiveCtrl"
};
});
}());
If having any queries please reply me