I'm using the featherlightGallery add on for featherlight.js.
It works OK except when I click on the 1st image in a set, the image opens but not as a "gallery". In other words, there is no "next" navigation button.
If I click the 2nd (or later) image, the gallery opens and I can click next and forward as expected.
<div class="tidy">
<div class="pfTitle" data-fid="12">
Photos-Misc
<div class="tih"><img src="img/upload.png" class="tup" alt="upload" title="upload"></div>
</div>
<div class="tpHolder">
<div class="tiWrap">
<div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/100_0708.jpg">
<img src="../data/towerFiles/ANNAWAN/Photos-Misc/100_0708.jpg"
class="ssImg Photos-Misc" title="Photos-Misc"
data-featherlight-gallery="Photos-Misc"
data-featherlight-target-attr="src">
</div>
<div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
</div>
<div class="tiWrap">
<div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/IMGP6500.JPG">
<img src="../data/towerFiles/ANNAWAN/Photos-Misc/IMGP6500.JPG"
class="ssImg Photos-Misc" title="Photos-Misc"
data-featherlight-gallery="Photos-Misc" data-featherlight-target-attr="src">
</div>
<div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
</div>
<div class="tiWrap">
<div class="tiLink" data-imglink="ANNAWAN/Photos-Misc/IMGP6501.JPG">
<img src="../data/towerFiles/ANNAWAN/Photos-Misc/IMGP6501.JPG"
class="ssImg Photos-Misc" title="Photos-Misc"
data-featherlight-gallery="Photos-Misc" data-featherlight-target-attr="src">
</div>
<div class="tiDel"><img src="img/x.png" class="ssImg delTpic" title="delete"></div>
</div>
</div>
When a thumbnail is clicked (bound to class tiLink) , this function is run:
// obj is the object (image thumbnail) that as clicked
function tiLink(obj){
var ilink=$(obj).data("imglink");
if( !ilink ){return;}
// var viewLink="../data/towerFiles/"+ilink;
var gal=$(obj).find("img").attr("title");
// single view
//$.featherlight(viewLink);
// gallery view
$("."+gal).featherlightGallery({
previousIcon: '◀', /* Code that is used as previous icon */
nextIcon: '▶', /* Code that is used as next icon */
galleryFadeIn: 100, /* fadeIn speed when slide is loaded */
galleryFadeOut: 300 /* fadeOut speed before slide is loaded */
});
}
One other note: the image data is loaded and created dynamically.
Why doesn't the 1st image have prev/next navigation if it is chosen first?
EDIT: the "non-gallery" problem happens with whatever picture I click first in the set.
EDIT #2:
JSFiddle demonstrating the problem
Looks like you're over complicating things. You have a single gallery, just bind it once. Call something like this once:
$('.tiLink').featherlightGallery({targetAttr: 'data-imglink', ...})
If you have multiple independent galleries, bind them individually, probably something like:
$('.gallery').each(function() { $(this).find('.item').featherlightGallery(...) })
Related
I am using a w3Schools tutorial for a modal. I would like to run an animation after the user clicks the close button. I am using a blind animation and have it working on open but would like the reverse on close.
Should I be using Javascript to change the classes inline? I've experimented with that but the animation doesn't have time to run because I'm closing the modal with display:hidden right after the animation call, so it's being executed before the animation has time to complete.
Here is my html. I have the animation class inline and the only thing I can think of is to switch the out animation with javascript:
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close"></span>
</div>
content here
</div>
</div>
How can I get the blind effect to run on open and close?
Next time please provide a link to the tutorial (or some such).
You could use javascript.
change your html to...
<div id="modal-one" class="modal">
<div class="modal-content modal-parent blind-content in origin-middle">
<div class="modal-header">
<h2>header</h2>
<span class="modal-close d-none"></span>
<span class="model-close-dummy"></span>
</div>
content here
</div>
</div>
then add javascript
let modal = document.querySelector("#modal-one");
let modal_close_dummy = modal.querySelector(".modal-close-dummy")
let modal_close = modal.querySelector(".modal-close")
modal_close_dummy.addEventListener("click", function () {
runClosingAnimation();//run animation - do what you need to do
setTimeout(function(){
modal_close.click(); //programatically click the actual close button after 500ms
}, 500) //500 time in miliseconds to wait, before the stuff inside setTimeout runs
});
Hope this helps.
I want to drag an image from one div to another div. I tried creating two arrays containing src of images and looping through all the src thereby two lists will be displayed so that I'm able to drag and drop easily by creating a function (cdkDropListDropped)="drop($event)"
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
} else {
transferArrayItem(event.previousContainer.data,
event.container.data,
event.previousIndex,
event.currentIndex);
}
}
but here I'm using only a single image and no array is being used. So, how can I drag and drop and I'm not aware of the function I should use for an image getting drop perfectly into another div.
html:
<div class="example1"
cdkDropList
id = "pic1"
[cdkDropListConnectedTo]="['pic2']"
style="background-color:red;"
>
<div cdkDrag class="example-box">
<img width="350px" height="250px" src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
</div>
</div>
<div class="example2"
cdkDropList
id = "pic2"
style="background-color:yellow;"
[cdkDropListConnectedTo]="['pic1']"
>
<div cdkDrag class="example-box">
</div>
</div>
Obligatory 'I have googled but am stuck'. I have a number of documents on a page with associated collapsible 'More Info' accordions. I want to be able to report on when people click to open one of these accordions and what the corresponding document name is.
Implementing tracking in GTM to show opens on the accordions are not a problem, but how do I associate the document name (h4) with the click event?
Div containing document, document heading and associated 'More Info':
enter image description here
Div that the document heading and the more info button are in:
<div class="employee-comms-results-documents">
<div class="row">
<div class="col-md-9 col-sm-8 col-xs-12 no-padding-right no-padding-left">
<div>
<div class="primary-document-meta"><div class="doc-type-pill" id="doc-type-pill-Flyers">Flyers
</div>
</div>
<h4>Helping you save for retirement</h4>
<div class="secondary-document-meta">More info <span class="caret"></span>
</div>
</div>
</div>
Thanks in anticipation!
I think I would need to see the whole site structure to be sure, but for your example I created a JavaScript variable in GTM that returns the corresponding h4-text on click.
This code has worked for me:
function(){
var clickElement = jQuery({{Click Element}}).parent(".secondary-document-meta").parent("div").find("h4").text();
return clickElement;
}
I am trying to use owl-carousel with Telescope but i am not able to make it to work. I have no dynamic data at this point. Below are the steps I followed.
Create a Telescope package.
Added Theme Zeiss.
Add the owl-carousel package
Then on the user Profile, where the telescope app shows the list of Posts the user has liked in a tabular format, i want to display it as a carousel with the images. (Please note this is the end goal, for now i am just trying to get the basic owl-carousel functionality work)
Below are the steps i took.
On the User_profile template i added a new template carousel
<template name="carousel">
<div class="user-profile-votes grid grid-module">
<div id="owl-carousel">
<div class="item"><h1>1</h1></div>
<div class="item"><h1>2</h1></div>
<div class="item"><h1>3</h1></div>
<div class="item"><h1>4</h1></div>
<div class="item"><h1>5</h1></div>
<div class="item"><h1>6</h1></div>
<div class="item"><h1>7</h1></div>
<div class="item"><h1>8</h1></div>
<div class="item"><h1>9</h1></div>
<div class="item"><h1>10</h1></div>
<div class="item"><h1>11</h1></div>
<div class="item"><h1>12</h1></div>
<div class="item"><h1>13</h1></div>
<div class="item"><h1>14</h1></div>
<div class="item"><h1>15</h1></div>
<div class="item"><h1>16</h1></div>
</div>
</div>
<div class="customNavigation">
<a class="btn prev">Previous</a>
<a class="btn next">Next</a>
</div>
</template>
After that is done, i added the js file supporting the template as below.
Template.carousel.rendered = function() {
Meteor.setTimeout(function() {
var owl = $('#owl-carousel');
owl.owlCarousel({
navigation : true,
loop: true,
autoplay: 1000,
items : 10, //10 items above 1000px browser width
itemsDesktop : [1000,5], //5 items between 1000px and 901px
itemsDesktopSmall : [900,3], // betweem 900px and 601px
itemsTablet: [600,2], //2 items between 600 and 0
itemsMobile : false, // itemsMobile disabled - inherit from itemsTablet option
mouseDrag: true,
touchDrag: true,
afterInit : function(elem){
var that = this
that.owlControls.prependTo(elem)
}
});
}, 0)
}
With this the carousel works, shows me 10 different elements, as you can see in the below video. Even the Autoplay works, the however the buttons or dots don't. I tried zillions of things and referred many articles changed timeout, added autorun, etc. However, this is a static list.
Not sure why it's not working, any help will be great.
https://youtu.be/Ljoxw561Eic
This owl-carousel package is using Owl Carousel 2
The link in the atmospherejs.com is wrong , that is old version. The Options & Events are different from this version.
Im having such a problem, I have a menu that has some hidden sub content. That when the user clicks the nav button some hidden content will appear. That part is fine and all working.
What I need to know is when I have one nav item showing it's hidden content. If the user clicks on the next nav item. I would like the other hidden content to disappear and the new hidden content to appear.
My inspiration comes from this website. http://www.o2.co.uk/ if you click on the nav arrow items. Any help on this would be great. By the way all the Show and Hide effects are all working.
Thanks Anyone who can help..
I'm assuming you're doing this in javascript. Pardon me if I'm being too elementary here.
Your function (if you can post it, that would be helpful) needs to not only change the display attribute of the element you clicked, but also change it to display:none; for any others.
So when you click on the nav item, your javascript changes the display attribute for that list to :block or whatever, and ALSO changes all the other lists to display:none. That's a little brute-force, so you could also just change whatever other ones are currently something other than :none to :none.
You'll need jQuery for this but...
first we tie a onClick function to each element with the class 'link'
we tell that onClick that on a click, HIDE all elements with the class 'hidable' and then show the div with the ID of the rel attribute value in THIS link.
http://api.fatherstorm.com/test/4159899.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script>
$(document).ready(function() {
$('.link').each(function(){
$(this).click(function(){
$('.hidable').hide();
$($(this).attr('rel')).show();
});
});
});
</script>
<ul>
<li class='link' rel='#div1'>l1</li>
<li class='link' rel='#div2'>l2</li>
<li class='link' rel='#div3'>l3</li>
<li class='link' rel='#div4'>l4</li>
<li class='link' rel='#div5'>l5</li>
</ul>
for the code block
<div class='hidable' id='div1'>div 1</div>
<div class='hidable' id='div2'>div 2</div>
<div class='hidable' id='div3'>div 3</div>
<div class='hidable' id='div4'>div 4</div>
<div class='hidable' id='div5'>div 5</div>