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.
Related
I have a HTML structure like so
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
When the primary-nav li a is hovered, jQuery is to slide an image with the apopropriate data-motion attribute of the hovered #primary-nav li.
function mpSlide() {
$("#primary-nav li a").on("mouseenter", function () {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).on('mouseleave', function () {
$("#feature-images .image-field ul li").removeClass("is-open");
});
}
My console gives no errors or warning. I'm not sure what I have done here.
You can use mouseover and mouseout for this like so also you need to remove the a from your select because it doesn't have a data-rel attribute.
$("#primary-nav li").mouseover(function() {
var $itemAtt = $(this).data("rel");
$("#feature-images .image-field ul li[data-motion='" + $itemAtt + "']").addClass("is-open");
}).mouseout(function() {
$("#feature-images .image-field ul li").removeClass("is-open");
});
.is-open{
background-color:blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outer-wrapper">
<ul id="primary-nav">
<li data-rel="mB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="mE">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
<li data-rel="yB">
<a href="#">
<h1 class="title">Title</h1>
</a>
</li>
</ul>
<div id="feature-images">
<div class="image-field">
<ul>
<li data-motion="mB">
<div class="img" style="background-image:url('/images/full1.jpg')"></div>
</li>
<li data-motion="mE">
<div class="img" style="background-image:url('/images/full2.jpg')"></div>
</li>
<li data-motion="yB">
<div class="img" style="background-image:url('/images/full3.jpg')"></div>
</li>
</ul>
</div>
</div>
</div>
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 :)
How to place the blocks in such a way?
Link of the image -> http://upload.akusherstvo.ru/image664571.jpg
<ul class="list">
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
<li class="item">
<a href="/" class="link">текст
<img src="" class="img">
</a>
</li>
</ul>
I would make 4 separate CSS columns and fill each of them separately.