Dropdown Menu About - javascript

I want to do a dropdown menu. Cover a distance. But I have a problem. When I click the product menu and opening menu after product menu with the open, click the references menu opening. But click the both menu it can be break down. This problem because of Javascript. Below I share my code also Html and Javascript. I wait for your help.
---HTML---
<div class="cbp-hsinner">
<ol class="parent">
<li>Home</li>
<li>About</li>
<li>
Product
<ol class="child">
<li>
<a href="#">
<img src="img/logom.jpg" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>
References
<ol class="child">
<li>
<a href="#">
<img src="img/1.png" alt="img01" />
<span>Delicate Wine</span>
</a>
</li>
<li>
<a href="#">
<img src="img/2.png" alt="img02" />
<span>Fine Spirit</span>
</a>
</li>
<li>
<a href="#">
<img src="img/3.png" alt="img03" />
<span>Heavenly Ale</span>
</a>
</li>
<li>
<a href="#">
<img src="img/4.png" alt="img04" />
<span>Juicy Lemonade</span>
</a>
</li>
<li>
<a href="#">
<img src="img/5.png" alt="img05" />
<span>Wise Whiskey</span>
</a>
</li>
<li>
<a href="#">
<img src="img/6.png" alt="img06" />
<span>Sweet Rum</span>
</a>
</li>
</ol>
</li>
<li>Contact</li>
</ol>
</div>
---JavaScript---
$('.child').hide();
$('.parent > li > a').click(function () {
$(this).parent().find('.child').slideToggle('slow');
});


You have to hide all menu before opening a menu.
You can use this code.
$('.child').hide();
$('.parent > li > a').click(function () {
$('.parent').find('.child').hide(); // this will hide menu
$(this).parent().find('.child').slideToggle('slow');
});

Related

Remove attribute of parent only?

I'm looking to remove the href attribute of the first link, at the moment it removes the attribute of ALL the links.
$("#menu-item-2003 a").removeAttr('href');
This is my html setup:
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

If you just want to remove the href of the first a, use direct descendent selector:
$("#menu-item-2003 > a").removeAttr('href');
The one which you use currently allows selection of the children at any level, which was causes the issue.
Working demo:
$("#menu-item-2003 > a").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Alternatively, if a is not a direct descendent, you can use the :first pseudo class to select the very first tag:
$("#menu-item-2003 a:first").removeAttr('href');

you can use first() in jquery
$("#menu-item-2003 a").first().removeAttr('href');

With First
Using .first() method
$("#menu-item-2003 a").removeAttr('href');
$("#menu-item-2003 a").first().removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :first Selector
$("#menu-item-2003 a:first").removeAttr('href');
$("#menu-item-2003 a:first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":first").removeAttr('href');
$("#menu-item-2003 a").filter(":first").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
With eq
Using .eq() method
$("#menu-item-2003 a").eq(0).removeAttr('href');
$("#menu-item-2003 a").eq(0).removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using first :eq() Selector
$("#menu-item-2003 a:eq(0)").removeAttr('href');
$("#menu-item-2003 a:eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>
Using .filter() with a Selector
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
$("#menu-item-2003 a").filter(":eq(0)").removeAttr('href');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li id="menu-item-2003">
<a href="#">
<span class="menu-image-title">Products</span>
</a>
<ul>
<li id="menu-item-2005">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
<li id="menu-item-2006">
<a href="#">
<img src="icon.svg">
<span class="menu-image-title">Title</span>
</a>
</li>
</ul>
</li>

My dropdown menu not working when I updating page with Ajax

I have a sidebar in body and also I have a content section in body. You can think
<aside class="sidebar-left-collapse">
Logo
<div class="sidebar-links">
<div class="link-yellow selected">
<a href="katalog/camgurubu.html">
KAPAK
</a>
</div>
<div class="link-blue">
<a href="katalog/cam2.html">
CAM GURUBU
</a>
<ul class="sub-links">
<li>Paşabahçe</li>
</ul>
</div>
<div class="link-red">
<a href="#">
PORSELEN GURUBU
</a>
<ul class="sub-links">
<li>KÜTAHYA PORSELEN</li>
<li>BONNA PORSELEN</li>
</ul>
</div>
<div class="link-yellow">
<a href="#">
ÇATAL/KAŞIK/BIÇAK
</a>
<ul class="sub-links">
<li>ARYILDIZ ÇATAL/KAŞIK/BIÇAK</li>
<li>ŞEHZADE ÇATAL/KAŞIK/BIÇAK</li>
<li>ALMOND ÇATAL/KAŞIK/BIÇAK</li>
<li>NARİN ÇATAL/KAŞIK/BIÇAK</li>
</ul>
</div>
<div class="link-green">
<a href="#">
MUTFAK SET ÜSTÜ MALZEMELERİ
</a>
<ul class="sub-links">
<li>DOLLY PLASTİK ÜRÜNLER</li>
<li>PİRGE BIÇAKLARI</li>
<li>VİCTORİNOX BIÇAKLARI</li>
<li>İTHAL MALZEME SET ÜSTÜ GRUBU</li>
<li>BORA SAKLAMA KABI VE DİĞER MALZEMELER</li>
<li>TÜRKAY POLİETİLEN GRUPLARI</li>
<li>CAMBRO ÜRÜNLERİ</li>
<li>PLASTİK,POLİKARBON MALZEMELER</li>
<li>KÜLSAN (THERMOSET MALZEMELER)</li>
<li>NARİN SET ÜSTÜ MALZEMELERİ</li>
<li>ARYILDIZ SET ÜSTÜ MALZEMELER</li>
<li>ALTINBAŞAK TEFLON TAVALAR,FAJİTA GRUPLARI, SET ÜSTÜ ÜRÜNLER</li>
<li>TEL KEVGİR, SÜZGEÇ, ÇIRPICI ÜRÜNLER GURUBU</li>
<li>KEPÇE, KEVGİR, SPATULA, MAŞA SERVİS GRUPLARI</li>
<li>TRİBECA ÜRÜN GRUPLARI</li>
<li>ALKAN-ZİCCO ÜRÜN GRUPLARI</li>
<li>ÇÖP KOVALARI</li>
<li>TENCERELER</li>
<li>KAÇAROLA/KÜVETLER</li>
<li>DERİ ÜRÜNLERİ VE MENÜLER</li>
<li>PİZZA TAVALARI</li>
<li>FIRIN KÜREKLERİ</li>
</ul>
</div>
<div class="link-green">
<a href="#">
AÇIK BÜFE EKİPMANLARI
</a>
<ul class="sub-links">
<li>İTHAL AÇIK BÜFE MALZEMELERİ</li>
<li>CHAFİNG DISH</li>
<li>BORA AÇIK BÜFE ÜRÜNLER</li>
<li>ALKAN-ZİCCO AÇIK BÜFE ÜRÜN GRUPLARI</li>
<li>GÜREN METAL AÇIK BÜFE ÜRÜNLERİ</li>
<li>KÜLSAN AÇIK BÜFE ÜRÜNLER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
PASTAHANE EKİPMANLARI
</a>
<ul class="sub-links">
<li>ARYILDIZ PASTAHANE ÜRÜNLERİ</li>
<li>PASTA,KEK KALIPLARI ALÜMİNYUM MALZEMELER</li>
</ul>
</div>
<div class="link-green">
<a href="#">
GENEL MALZEME GRUBU
</a>
<ul class="sub-links">
<li>PLASTİK TAŞIMA EKİPMANLARI VE AKSESUARLARI</li>
<li>KAHVE MAKİNALARI </li>
<li>AHŞAP SERVİS EKİPMANLARI</li>
</ul>
</div>
<div class="link-green">
<a href="#">
CİHAZLAR
</a>
<ul class="sub-links">
<li>
<div class="link-green">
<a href="#">
HAZIRLIK
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KAFETERYA CİHAZLARI
</a>
<ul class="sub-links">
<li> Arda </li>
<li> Zaman </li>
<li> Deneme</li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
BULAŞIKHANE
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 600 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 700 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
PİŞİRME GURUBU 900 SERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
KONVEKSİYONLU FIRINLAR
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
SOĞUTMA EKİPMANLARI
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEŞHİR ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
RAF ÜRÜNLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
TEZGAH/DAVLUMBAZ/YER SÜZGEÇLERİ
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
ÇAMAŞIRHANE GRUBU
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
<li>
<div class="link-green">
<a href="#">
İTHAL ÜRÜNLER
</a>
<ul class="sub-links">
<li></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</aside>
<div class="main-content">
<div class="menu">
<section id="content">
</section>
</div>
</div>
When I update content section with ajax dropdown menu doesn't work. I think the problem is, menu selected class unchanged because ajax refresing page.
var links = $('.sidebar-links > div');
var links2 = $('.sidebar-links > div > ul.sub-links > li > div');
links.on('click', function () {
links.removeClass('selected');
$(this).addClass('selected');
});
links2.on('click', function () {
links2.removeClass('selected');
$(this).addClass('selected').show();
});
$('.sidebar-links div a').on('click' ,function(){
var yol = $(this).attr('href');
$(this).attr("href", "#");
$.ajax({
async: true,
type: "GET",
url: yol,
success: function (html) {
$("#content").html(html);
}
});
});

Menu active with jquery

Best regard,
I have a menu and i want to use the active class active with url format but I don't know how:
<div class="col-sm-6">
<div class="menul">
<a href="#">
<div>
<img src="image" alt="">
<span class="sombra"></span>
<img class="onhover" src="image" alt="image">
</div>
</a>
</div>
</div>
$(".menul a").each(function() {
if (this.href == window.location.href)
$(.onhover).addClass("active");
})

try to implement with navbar nav class example below
<ul class="nav navbar-nav">
<li class="active">
<a href="#">
<img src="img" alt="">
</a>
</li>
<li>
<a href="#">
<img src="img" alt="image">
</a>
</li>
</ul>

superfish+ slicknav not work

I have a problem on menu of website,this menu have more section and in desktop version is suddivise in two part , the first is normal menu the second use jquery superfish for drop-down menu in desktop.
In mobile use only slicknav, http://slicknav.com/
every work fine , but have a problem , if example open the menu in desktop and after try to resize the screen of desktop the superfish not switch with slicknav, only if reload the page work and load correct class.
The same in viceversa:
If open menu in slow screen and after try to open not switch to superfish
in practice should change class to a same <div class=""> to use in desktop superfish and slicknav in Mobile
ii have used this script but not work
<script>
function resize() {
if ( $(window).width() < 739) {
$("#nullo").toggleClass('sf-menu cambioclasse2');
}
else {
$("#nullo").toggleClass('sf-menu sf-menu');
}
}
$(window).on("resize", resize);
resize(); // call once initially
</script>
The class="cambioclasse2 " in a class i have used for annulled the class of superfish "sf-menu"
Menu in desktop:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>
menu in mobile:
<div id="header" class="clearfix">
<ul id="top-menu">
<ul id="nullo" class="sf-menu">
<li>
<a class="tito" href="/amministra/"><img src="/inc/files/images/adminplus.png"></a><div class="ams">AMMINISTRA</div>
<ul>
<li>
<a class="tab_amministra" href="/amministra/gestione_commerciale/" title="">
Commerciale </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_eccellenze/" title="">
Eccellenze </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_aree/" title="">
Aree </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_contabile/" title="">
Contabile </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_certificazioni/" title="">
Certificazioni </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_compensi/" title="">
Compensi </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_trattative/" title="">
Trattative </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_club/" title="">
Club </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_guida/" title="">
Guida </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_pagine/" title="">
Pagine </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_mailing/" title="">
Mailing </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_report/" title="">
Report </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_batching/" title="">
Batching </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_temi_seo/" title="">
Classificazione </a>
</li>
<li>
<a class="tab_amministra" href="/amministra/gestione_visite_pagine/" title="">
VIsite pagine </a>
</li>
</ul>
</li>
</ul>
<li>Home</li>
<li>
<a href="/vacanze_weekend/">
Vacanze </a>
</li>
<li>
<a href="/matrimoni/">
Matrimoni </a>
</li>
<li>
<a href="/meeting/">
Meeting </a>
</li>
</li>
<li><span class="current-lang">ita</span> | ENG</li>

How to get slider images on fancybox popup, how to work on this?

I have a question on my project,
currently i am using tn gallery slider. In that slider i have one link when i click that link those slider images have to display in fancy box popup.
can any one help with coding?
I am new to jquery and javascript.
$(document).ready(function() {
//Thumbnailer.config.shaderOpacity = 1;
var tn1 = $('.mygallery').tn3({
skinDir:"img",
imageClick:"fullscreen",
image:{
maxZoom:1.5,
crop:true,
clickEvent:"dblclick",
transitions:[{
type:"blinds"
},{
type:"grid"
},{
type:"grid",
duration:460,
easing:"easeInQuad",
gridX:1,
gridY:8,
// flat, diagonal, circle, random
sort:"random",
sortReverse:false,
diagonalStart:"bl",
// fade, scale
method:"scale",
partDuration:360,
partEasing:"easeOutSine",
partDirection:"left"
}]
}
});
$("a[rel=example_group]").fancybox(
{
'transitionIn' : 'none',
'transitionOut' : 'none',
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / ' + currentArray.length + (title.length ? ' ' + title : '') + '</span>';
}
});
});
HTML code:
<div class="mygallery">
<div class="tn3 album">
<ol>
<li>
<h4>Hohensalzburg Castle</h4>
<div class="tn3 description">Salzburg, Austria</div>
<a href="img/620x378/1.jpg">
<img src="img/35x35/1.jpg"/>
</a>
</li>
<li>
<h4>Isolated sandy cove</h4>
<div class="tn3 description">Zakynthos island, Greece</div>
<a href="img/620x378/2.jpg">
<img src="img/35x35/2.jpg" />
</a>
</li>
<li>
<h4>A view from the Old Town</h4>
<div class="tn3 description">Herceg Novi, Montenegro</div>
<a href="img/620x378/3.jpg">
<img src="img/35x35/3.jpg" />
</a>
</li>
<li>
<h4>Walls of the Old Town</h4>
<div class="tn3 description">Kotor, Montenegro</div>
<a href="img/620x378/4.jpg">
<img src="img/35x35/4.jpg" />
</a>
</li>
<li>
<h4>Boat in the port</h4>
<div class="tn3 description">Sousse, Tunis</div>
<a href="img/620x378/5.jpg">
<img src="img/35x35/5.jpg"/>
</a>
</li>
<li>
<h4>Wall of the Jain temple</h4>
<div class="tn3 description">Jaisalmer, India</div>
<a href="img/620x378/6.jpg">
<img src="img/35x35/6.jpg" />
</a>
</li>
<li>
<h4>City park</h4>
<div class="tn3 description">Negotin, Serbia</div>
<a href="img/620x378/7.jpg">
<img src="img/35x35/7.jpg" />
</a>
</li>
<li>
<h4>Taj Mahal mausoleum</h4>
<div class="tn3 description">Agra, India</div>
<a href="img/620x378/8.jpg">
<img src="img/35x35/8.jpg" />
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg" />
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg"/>
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
</ol>
</div>
</div>

Here is what your HTML should look like with your fancybox code. Since I can not see your site, I have no idea if you are loading javascript and css files correctly, or what versions of these files you are using etc.
<div class="mygallery">
<div class="tn3 album">
<ol>
<li>
<h4>Hohensalzburg Castle</h4>
<div class="tn3 description">Salzburg, Austria</div>
<a href="img/620x378/1.jpg">
<img src="img/35x35/1.jpg"/>
</a>
</li>
<li>
<h4>Isolated sandy cove</h4>
<div class="tn3 description">Zakynthos island, Greece</div>
<a rel="example_group" href="img/620x378/2.jpg">
<img src="img/35x35/2.jpg" />
</a>
</li>
<li>
<h4>A view from the Old Town</h4>
<div class="tn3 description">Herceg Novi, Montenegro</div>
<a href="img/620x378/3.jpg">
<img src="img/35x35/3.jpg" />
</a>
</li>
<li>
<h4>Walls of the Old Town</h4>
<div class="tn3 description">Kotor, Montenegro</div>
<a rel="example_group" href="img/620x378/4.jpg">
<img src="img/35x35/4.jpg" />
</a>
</li>
<li>
<h4>Boat in the port</h4>
<div class="tn3 description">Sousse, Tunis</div>
<a href="img/620x378/5.jpg">
<img src="img/35x35/5.jpg"/>
</a>
</li>
<li>
<h4>Wall of the Jain temple</h4>
<div class="tn3 description">Jaisalmer, India</div>
<a href="img/620x378/6.jpg">
<img src="img/35x35/6.jpg" />
</a>
</li>
<li>
<h4>City park</h4>
<div class="tn3 description">Negotin, Serbia</div>
<a href="img/620x378/7.jpg">
<img src="img/35x35/7.jpg" />
</a>
</li>
<li>
<h4>Taj Mahal mausoleum</h4>
<div class="tn3 description">Agra, India</div>
<a rel="example_group" href="img/620x378/8.jpg">
<img src="img/35x35/8.jpg" />
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a rel="example_group" href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg" />
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
<li>
<h4>Zante Port</h4>
<div class="tn3 description">Zakynthos, Greece</div>
<a href="img/620x378/9.jpg">
<img src="img/35x35/9.jpg"/>
</a>
</li>
<li>
<h4>Rustovo Monastery</h4>
<div class="tn3 description">Budva, Montenegro</div>
<a rel="example_group" href="img/620x378/10.jpg">
<img src="img/35x35/10.jpg" />
</a>
</li>
<li>
<h4>The Mezquita, Cathedral and former Great Mosque</h4>
<div class="tn3 description">Cordoba, Spain</div>
<a href="img/620x378/11.jpg">
<img src="img/35x35/11.jpg"/>
</a>
</li>
<li>
<h4>Wine Cellars</h4>
<div class="tn3 description">Rajac, Serbia</div>
<a rel="example_group" href="img/620x378/12.jpg">
<img src="img/35x35/12.jpg"/>
</a>
</li>
</ol>
</div>
</div>

Categories

Resources