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>
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');
});
On hover over images button appears
HTML
<div class="block-11 block-1">
<div class="carousel-wrapper" id="carousel-1">
<ul class="carousel clearfix">
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_8.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_8.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_9.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_9.jpg" alt="" width="646" height="350">
</a>
</li>
<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>
</ul>
<div class="semitransparentoverlay">
<input name="" type="button" value="Смотреть все фото" class="btn-1">
</div>
</div>
</div>
http://jsfiddle.net/1po0acv6/5/
Is there a way to do so that the images are downloaded to Lightbox when clicked on the button?
The images will not get "downloaded" to lightbox on button click, you will have to add the images in the innerHTML of 'ul class="carousel clearfix"', I mean the HTML of 'li' including its children 'a' and 'img'. And then reinitialize the lightbox.
Like this:
jQuery('#button').click(function(){
$('ul.carousel').html('<li>
<a href="img/img_10.jpg" data-lightbox="gallery-1" data-title="">
<img src="img/img_10.jpg" alt="" width="646" height="350">
</a>
</li>');
//now code lightbox reinitialization, according to the library you are using
});
Best of luck :)
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>
I have a jcarousel using in Expression Engine. The code is as below
<div id="carousela" class="jcarousel image-cell">
<ul>
{exp:cg_industry_data:images vehicle_id="{id}" size="large"}
<li {if {index} == {segment_3}} class="active"{/if}><img src="{img_url}" alt="" /> </li>
{/exp:cg_industry_data:images}
</ul>
</div>
The carousel works just fine.
Now I want a text something like below Picture xxx of {imageCount} .I need to make it such that it displays in which image currently being viewed. The imageCount works just fine. Can someone please help me on that/? Or maybe atleast if possible when jcarousel is used how to determine which image being currently displayed?The rendered html looks like below
<div class="index">Picture 1 of 15</div>
<div id="carousela" class="jcarousel image-cell">
<ul>
<li class="active"><img src="/0265/0745/2014_hyundai_i30_stock_2650745_1_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_2_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_3_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_4_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_5_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_6_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_7_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_8_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_9_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_10_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_11_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_12_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_13_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_14_l.jpg" alt="" /> </li>
<li ><img src="/0265/0745/2014_hyundai_i30_stock_2650745_15_l.jpg" alt="" /> </li>
</ul>
</div>
<div id="navigation" class="clearfix">
<span class="button prevPage"></span>
<div id="carousel">
<ul>
<li class="active"><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_1_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_2_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_3_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_4_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_5_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_6_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_7_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_8_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_9_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_10_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_11_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_12_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_13_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_14_t.jpg) center;"></span></li>
<li ><span class="img" style="background:url(/0265/0745/2014_hyundai_i30_stock_2650745_15_t.jpg) center;"></span></li>
</ul>
</div>
<span class="button nextPage" ></span>
This is largely pseudo-code, but upon initial inspection of the plugin, you need to hook in to the plugins jcarousel:targetin event. This mean when the carousel image is switched it will do something. As such, we will change the basic markup to:
<div class="jcarousel">
<ul>
<li><img src="img1.jpg" alt=""><p>HERP</p></li>
<li><img src="img2.jpg" alt=""><p>DERP</p></li>
<li><img src="img3.jpg" alt=""><p>HERPDERP</p></li>
</ul>
</div>
<div class="comment"></div>
Where .comment represents where the comments will go.
Then, when you instantiate the plugin, do something like the following:
$(function() {
$('.jcarousel').on('jcarousel:targetin', 'li', function(event, carousel) {
var comment = $(this).find('p').html();
if(comment) $('.comment').html(comment);
});
$('.jcarousel').jcarousel();
});
NOTE: Make sure the .on comes before the .jcarousel or the carousel won't know to catch the initial "change" on load and the first slide will not add its comment.
This makes it so whenever a new <li> becomes the focus (aka: clicking forward/back), it will search that li for a p grab it's html and set the html of .comment to it.
This should cover your needs, but you will need to modify it accordingly and possibly add some CSS to the p's so they don't show up.