We Keep Coding

Featherlight Plugin Better Navigation

I have this code:
<section data-featherlight-gallery="" data-feather-filter="a">
<a class="apt-gallery-d" href="img.png">
<img class="module-img-size" src="img.png" alt="1 Alcoba">
</a>
<a class="apt-gallery-d hidden" href="img.png">
<img class="module-img-size" src="img.png" alt="1 Alcoba">
</a>
</section>
jQuery(document).ready(function() {
jQuery('a.apt-gallery-d').featherlightGallery({
openSpeed: 300,
previousIcon: ' ',
nextIcon: ' ',
variant: 'custom-lightbox-css',
loading: 'Cargando...',
});
})
When the lightbox opens, a slider appears with the default lightbox navigation, however the navigation isn't very user friendly. You don't know when you've seen the last image because it looks like and endless loop. Also, if I have only one image the navigation appears regardless.
How can I better control when this next prev arrows show up?

From the doc:
It sets the classes 'featherlight-first-slide' and 'featherlight-last-slide' if the current slide is the first and/or last one.
You can use those to customize the look or disable the previous & next buttons as you wish

Change fancybox close button within html for one page scroll site

I have one page scroll site(like f.ex. fullPage.js, fullContent.js), where fancybox is used to open up new content.
<a class="fancybox" rel="group" href="#content">
<img src="img/thumb.jpg" alt="" />
</a>
<div id="content" style="display:none;">
// content
</div>
Close button by default in fancybox is positioned absolute, which is not acceptable in my case - close button needs to be within specific div.
One way to trigger close is the following:
close
It does close content, but it drops to start position of website, not to section from where fancybox is triggered.
Any ideas how to get close button working so that after closing content, viewpoint doesn't change?
Interesting that default close button, which is enabled through js keeps viewpoint where it was before opening fancybox.
$(".fancybox").fancybox({
closeBtn : true,
});
Thanks in advance.

Use this:
close
This will stop the the browser to slide up.
Or you may also try:
<a href="#nogo"> or <a href="javascript:;">

Expand and collapse menu, without taking user to top of the page

I have an image button, and I am using JavaScript to EXPAND and COLLAPSE a menu (by toggling between a class that has display: none). The toggle works fine (see the code below). However, whenever I click the button, it takes the user back to the very top of the page. I just want the "click" to expand and collapse the menu and keep the user at the location they currently are. How can I achieve this?
<script type="text/javascript">
function changeClass()
{
$('div#mainmenu_wrap').toggleClass('hidemenu');
}
</script>
<a href="#" onclick="changeClass()">
<img src="images/menu_icon2.png" width="33" height="33" />
</a>

change this line <a href="#" onclick="changeClass()">
to this: <a href="#" onclick="changeClass(e)">
and change the structure of your changeClass() function to below and add the given line:
function changeClass(event){
event.preventDefault();
.
.
.
}

Got it working...
Got rid of the href, and used a button tag instead. That worked.
<button onclick="changeClass()" class="menuIco">
<img src="<?php bloginfo('stylesheet_directory'); ?>/images/menu_icon2.png" width="33" height="33" />
</button>

HTML pop up on click within WordPress

In the WordPress theme I am using there is an area for HTML banner code. At the moment it contains the following:
<a href="http://bathcitysound.com/streaming/player.html">
<img src="my-image-code-goes-here" /></a>
All is well and good, and it functions as it should and when clicked it goes to the specific page. However, what I actually want to happen is when the image is clicked, it opens a pop up window of 300 pixels wide and 600 pixels height with this as the address:
http://bathcitysound.com/streaming/player.html
What should I add to the existing code to make that work?

This should work:
<a href="javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')">
<img src="my-image-code-goes-here" />
</a>
You can try in your browser, by going to this URL:
javascript:window.open('http://bathcitysound.com/streaming/player.html','yourWindowTitle','width=300,height=600')

Reorder image gallery

I have an unordered list of image thumbnails. Each thumbnail links to the full size image.
I use the YUI3 library to allow drag & drop reordering of the thumbnail images (just the out-of-the-box example code).
The problem is the link to the fullsize image: it is not draggable. Only the small portions underneath the thumbnail (with title and value) are draggable.
<ul>
<li class="imgcontainer">
<div>
<a href="/image.jpg">
<img src="thumbnail.jpg" border="0" alt="" />
</a>
</div>
<div class="left">Title</div>
<div class="right">$2.00</div>
<div class="clear"></div>
</li>
<!-- ... -->
</ul>
What is the best way to allow users to reorder the images in such an image gallery?
Add a drag handle icons to a corner of the list items?
Create a "reorder mode" in which the link anchors are removed, leaving only draggable images?
Or can it be set up so that the links still can be dragged?

Your problem is that the anchor tag is not a valid drag handle per default. You can change this by using removeInvalid('a') on your drag instance.
var dd1 = new Y.DD.Drag({
node: '#drag1'
});
dd1.removeInvalid('a');
Another option would be to remove the anchor tag
<div class="linked-image">
<img src="http://placekitten.com/50/50" border="0" alt="" />
</div>
and add a click listener to the image.
Y.on('click', function () {
alert('go to url');
}, '.linked-image');
Both approaches are demonstrated here: http://jsfiddle.net/xGQne/
Note that the click event fires after the drag is completed in both cases. You will need to differentiate between clicks and drags to make this work smoothly.