I can't seem to get multiple JQuery LightBox galleries to work on on HTML page. I have already tried all the suggestions on a similar post someone did a while back but I still can't get it to work!
Here is a bit of background info...
I have developed a static HTML page which contains three separate Lightbox galleries. The first gallery loads and works perfectly, but the second and third galleries fail to load; neither displaying the hyperlinked image (that triggers the lightbox gallery) or the images within that one gallery, I just get the 'loading' animation.
I am calling the Lightbox javascript in the of the HTML and have duplicated the Javascript calling function for the second and third galleries, calling them "#gallery1 a", "#gallery2 a", "#gallery3 a" etc, but it still doesn't work.
I know the three galleries work together because if I duplicate the first gallery (including all of images that are for gallery 1) and paste it again below, all three galleries work. The problem comes when I change the filename of the photo's that I want in the second and third galleries.
I have attached below an extract from <head> the and also the html from the static page so you can see everything I have done so far.
It would be greatly appreciated if someone could please point out where I am going wrong to get all three of these galleries to work.
Many thanks in advance...
Here is the HEAD of the HTML:
<head>
$(function() {
$('#gallery a').lightBox();
});
$(function() {
$('#gallery1 a').lightBox();
});
$(function() {
$('#gallery2 a').lightBox();
});
$(function() {
$('#gallery3 a').lightBox();
});
</head>
Now for the HTML:
<div id="gallery">
<ul>
<li>
<a href="portfolio/Bathroom install 2 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 2 watermarked/ian work photos 112.jpg"/>
</a>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
<div id="gallery1">
<ul>
<li>
<a href="portfolio/Bathroom install 3 watermarked/ian work photos 089.jpg">
<img src="portfolio/Bathroom install 3 watermarked/ian work photos 182.jpg"/>
</a>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
<li>
</li>
</ul>
</div>
Related
I have 2 div's, the first is just a link,
<div id="click1" class="grid-66 mobile-grid-100 user-photo-tag-click" style="display:block" onclick="replace()"> CLICK AND SHOW TAGS
</div>
The second is a list of photo tags,
<div id="click2" class="grid-66 mobile-grid-100 user-photo-tag" style="display:none">
<ul>
<li>RACE SHOP
</li>
<li>AAA
</li>
<li>77
</li>
</ul>
</div>
I am trying to set it up so that when the link is clicked, it disappears and the photo tags show in its place. I have started a JSFIDDLE here, https://jsfiddle.net/patricksharer/g43t1bnh/ so that my code can be viewed cleanly. My javascript function doesnt seem to be working. Can somone please take a look and tell me why? Thanks
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
I have the following code block to acheive a slideshow to navigate different content(list) on click of the navigation buttons. Everything goes fine and works great. But indeed i need an additional feature like the slideshow should run on the load of the page and the buttons to choose the exact position of the slideshow as well. Still I need those button to navigate my slide show. Thanks in advance.
MARKUP
<div class="testimony">
<div class="container">
<ul class="test-con">
<li class="current">
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 1 ”</h5>
<h6>- Test 1</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“My Test Content 2”</h5>
<h6>- Test 2</h6>
</li>
<li>
<a class="image-frame" href="">
<img src="http://placekitten.com/g/100/150"></a>
<h5>“ My Test Content 2 ”</h5>
<h6>- Test 3</h6>
</li>
</ul>
<ul class="navigator">
<li class="current"></li>
<li></li>
<li></li>
</ul>
</div>
</div>
JQuery
$('.navigator li').click(function () {
var index = $(this).index();
$(this).addClass('current').siblings().removeClass('current');
$('.test-con li').hide();
$('.test-con li').eq(index).addClass('current').fadeIn('slow').siblings().removeClass('current');
});
NOTE: Need to animate width instead of fade animation.
FOR REFERENCE: CHECK THIS
FIDDLE DEMO
jQueryUI provides a lot of facilities to make personalized the js code.
In any case, why don't you try to use a library of js sliders already existing?
What you want to create could increase proportionally with the appeal you want to reach :)
I knew http://www.slidesjs.com/, which makes the same work with the required attention.
Alex
I have created a menu for my website which you can find here:
http://jsfiddle.net/nq9Nt/9/
When click a category on the menu it opens that category on my main navigation?
Is something conflicting or have I placed my Javascript in the wrong place?
So I want to be able to click a category and show the sub-categories but it just won't work. Also is there a way to keep open the category you clicked after you change page?
Thank you
<ul class="nav">
<li>Category 1
</li>
<li class="drop">Category 2
<ul id="sub1">
<li>Item
</li>
<li>Item
</li>
</ul>
</li>
<li class="drop">Category 3
<ul id="sub1">
<li>Sticker
</li>
<li>Sticker
</li>
</ul>
</li>
<li>Category 4
<ul id="sub1">
<li> Mural
</li>
<li>Mural
</li>
</ul>
</li>
$(".drop")
.on('click', function () {
$(this).find('ul').toggle();
})
Actually at least on jsfriddle animation works and if you replace href of your anchors from '#' to a real url you will be redirected to another page, so first make sure that you've attached jquery library in head of the document (since you use it in your script), then move your script to the bottom of the page, right before tag 'body' closes.
About keeping the state of the opened categories after refresh - usually it is made on server side while generating template by adding class, for example 'active', to current link and then, using css, corresponding category (or a hierarchy of categories) is set to be opened (li.active ul {display: block;} for example). Well, actually you could do the same trick - use js to find out current url with the help of window.location.pathname value and match it with a href value of your navigation links and then assign class 'active' to the found element (or its parent, it is up to your css)
You can add a class drop to li in 4th Category, so it will work as others. And remove that onclick if you don't plan to use it.
http://jsfiddle.net/nq9Nt/10/
Here the example,
jsbin
You have gave the anchor href with #, So It reloads the page. And also you have gave the onclick method, But it doesn't there.
I edited a template that I found online and had a jquery for thumbnails..
<ul class="ff-items">
<li class="ff-item-type-1">
<a href="#" title="" >
<div><span>Title 1 ABC</span></div>
<img src="images/w_abc1.jpg" alt=""/>
</a>
</li>
<li class="ff-item-type-3">
<a href="#" target="_blank" >
<div><span>TITLE 2 ABC</span></div>
<img src="images/w_abc1.jpg" alt="" />
</a>
</li>
</ul>
Link to this jquery plugin: [ ::Link:: ]
This plugin groups a list of images and on hover displays an animation with spanned text for info. Basically a transition on hover.
Now, I'm trying to change the hover effect to another effect via another jquery plugin which uses the following syntax:
<ul id="da-thumbs" class="da-thumbs">
<li>
<a href="http://dribbble.com/shots/502538-Natalie-Justin-Cleaning">
<img src="images/7.jpg" />
<div><span>Natalie & Justin Cleaning by Justin Younger</span></div>
</a>
</li>
<li>
<!-- ... -->
</li>
<!-- ... -->
</ul>
Link to this Jquery/CSS3 plugin: [ :::link::: ]
Now, my problem is that I want to keep the radio button selection but don't want the transition effects on hover.. instead I want the second jquery listed above which displays the info in a direction-aware way.
Class for ul is already described as class="ff-items". How can I add another class to it? I tried giving a space between the classes but that didn't function at all. Images froze without any transition or hover effect at all! I tried this:
<ul id="da-thumbs" class="ff-items da-thumbs">
( added da-thumbs id and gave 2 classes to the UL.)
Any help would be great! Thanks.