We Keep Coding

Layerslider and usijng hyper link to a popup

I am using layerslider plugin to show rotating sliders on my homepage and those sliders are working as hyperlinks, one of the hyperlinks should go to a pop up menu, but it seems class="ls-link" is the only class I can use, and the Jquery pop has it is own class="open-popup-link", how can make the layerslider show that pop up when the user clicks on the slider?
How I can do that?
Layerslider code + standard slider hyperlink
<div class="ls-slide" data-ls="slidedelay:8000 ; transition2d:5;timeshift:0;">
<img src="/img/Slide1.png" class="ls-bg" alt="Slide background"/>
<a href="/users/login" class="ls-link" </a>
</div>
</div>
</a>
Regular html Hyperlink for pop up:
<a href="/users/register" id="register-link" class="open-popup-link" >Login</a>

Add class in it like class="ls-link open-popup-link".
Click

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:;">

How to hide photos until menu is expanded?

I am creating a photo gallery with different drop down menus containing separate categories. Everything works great, except that when I test the gallery page all the images are visible while they load, and then once they're fully loaded they disappear into their said categories (as it should be to begin with). My question is this...
Is there a way to hide all the photos until someone clicks and expands a menu option? Or perhaps a better way to go at this all together?
Here is a link to the gallery site... http://wayhigh.we.bs/Fireball%20Site/gallery.html
Here is a sample of the html...
<div class="wrapper">
<div id="st-accordion" class="st-accordion">
<ul>
<li>
Functional<span class="st-arrow">Open or Close</span>
<div class="st-content">
<a class="fancybox-thumb" rel="functional" href="images/wyzeguy.jpg" title="Wyze guy rigs">
<img src="images/smallwyzeguy.jpg" alt="" />
</a>
<a class="fancybox-thumb" rel="functional" href="images/dragon.jpg" title="Dragon">
<img src="images/smalldragon.jpg" alt="" />
</a>
</div>
there are several of these menu items...
script for the accordion menu...
$(function()
{
$('#st-accordion').accordion(
{
oneOpenedItem : true
});
});
$(document).ready(function()
{
$(".fancybox-thumb").fancybox(
{
prevEffect : 'none',
nextEffect : 'none',
helpers :
{
title :
{
type: 'outside'
},
thumbs :
{
width : 50,
height : 50
}
}
});
});
Is there a better solution than what I've come up with? Or a way to stream-line my solution?
Thanks for the help.

I think a simple way of hiding the photos till load would be to make them display:none until the document is ready. Create a class in the css called hidden and give it the styling of display:none. Add the class to all the images.
Then in the $(document).ready call add a line as the fancybox callback or after you setup the fancy box that looks like, $("img.hidden").removeClass("hidden");.

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...

I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.

Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"

Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

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.