slick setting active slide - javascript

I have implemented slick (http://kenwheeler.github.io/slick/) and everything is fine except the first slide is the first image shown rather than the one clicked on from the list of images, say image 5, image 1 would be displayed. I am using PHP to try and automate the process.
The col-sm-4 while loop displays all the images on the page, then when clicked a modal with the slick will popup and display the images inside the modal. As I said this process works fine, except the position of the image that is clicked. For eg, I click image 6 from the col-sm-4 list of images, but image 1 is displayed.
I would appreciate any assistance from the community. Thanks
**UPdate .. add a data/var and counter menuid to each div, I am just not sure how to access it in the Slick JS initialSlide option shown below: **
<div class="row">
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery);
while ($row = mysqli_fetch_array($value))
{ ?>
<div class='col-sm-4'>
<a title='<?php echo($row[0]); ?> href='#'>
<img class='thumbnail img-responsive images' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
<p class='images text-center'><?php echo($row[0]); ?></p>
<p id="demo"></p>
</a>
</div>
<?php } ?>
<div class='modal' id='modal-gallery' role='dialog'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button class='close' type='button' data-dismiss='modal'>×</button>
<h3 class='modal-title text-center'></h3>
</div>
<div class='modal-body'>
<div id='modal-carousel' class='text-center'>
<div class='your-content'>
<?php
$query_gallery = "SELECT name, image_location, gallery_id FROM cms_gallery order by image_place asc";
$newmenu = new menu();
$value = $newmenu->mysqlquery($query_gallery); $counter = 0;
while ($row = mysqli_fetch_array($value))
{ ?>
<div id="menulist" data-menuid="<?php echo $counter++; ?>">
<h1>'<?php echo($row[0]); ?>'</h1>
<img class='modal-thumbnail' id='<?php echo($row[2]); ?>' title='<?php echo($row[0]); ?>' src='<?php echo($row[1]); ?>' data-menuid="<?php echo($row[2]); ?>">
</div>
<?php } ?>
</div>
</div>
<div class='modal-footer'>
<button class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="resources/slick/slick/slick.js"></script>
<script>
$('.thumbnail').click(function(){
$("#modal-gallery").modal("show");//.modal('show')/.modal('hide');
});
var menulist = $("#menulist");
var menuid = menulist.data("menuid");
$( "#menulist" ).click(function() {
var myId = $( "#menulist" ).data("menuid");
$( "#menulist" ).attr("menuid", myId);
});
$(document).ready(function(){
$('.your-content').slick({
/* lazyLoad: 'ondemand', */
/* centerMode: true, */
dots: true,
/* infinite: true, */
speed: 500,
fade: true,
adaptiveHeight: true,
focusOnSelect: true,
cssEase: 'linear',
/* initialSlide: 1, */
setPosition: 1,
/* slickGoTo: 8, */
initialSlide: menuid
});
});
</script>

Related

Product Carousal for desktop and mobile? (Css,Javascript,html)

I'm trying to make a product carousal. i have used swiper.js but it is not working
i have set of 4 products show in a row and i want to make a carousal for mobile too having only 1 product in one row and swipe to see others
here is my code
<div class="row mt-5">
<?php if ($wc_query->have_posts()) : ?>
<div class="swiper-container">
<div class="swiper-wrapper">
<?php while ($wc_query->have_posts()) :
$wc_query->the_post(); ?>
<div class="swiper-slide mob mx-auto col-md-2">
<div class="border-box">
<?php the_post_thumbnail(); ?>
</div>
<center><h3 class="box-bottom"><?php the_title(); ?><h3>PKR:<?php echo $product->get_price();?></h3></h3></center>
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
</div>
</div>
<?php else: ?>
<li>
<?php _e( 'No Products' ); ?>
</li>
<?php endif; ?>
</div>
JS CODE
var mySwiper = new Swiper ('.swiper-container', {
// Optional parameters
direction: 'horizontal',
loop: true,
// Navigation arrows
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// And if we need scrollbar
scrollbar: {
el: '.swiper-scrollbar',
},
})

I am using Owl Carousel - Filter on projects as per category so i want to show the category description on every category button click

I have category table field and project table field in db i am fetching data or project as per category ID and showing them using php codedigniter in Owl Carousel - Filter Javascript.
below are the detail mention. include image view.
What actually i want i am trying to show the category detail under the projects on category button click
I assign the same class to the category button and the project by concatenating the category Id and projects category Id. So when we click on button the projects having same button class are appear perfectly but it not showing the category detail while click on specific category button click. for more information i am attaching my code as well. please have look. and help me. if you understand the problem.
my PHP Codeigniter Code is:
<div style="margin-bottom:10px; text-align: center;">
<div class="btn-filter-wrap">
<button class="btn-filter" data-filter="*">All</button>
<?php $categorydetail = ""; ?>
<?php if (!empty($categorydata)) { foreach ($categorydata as $category) {
$categoryclass = "category".($category['id']);
$categoryname = ($category['shortname']);
$categorydetail = ($category['detail']);
?>
<button class="btn-filter" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
<?php }} ?>
</div>
<div class="project-slick categories">
<?php if (!empty($projectdata)) { foreach ($projectdata as $project) {
$projectclass = "category".($project['categoryid']);
$title = ($project['title']);
$detail = ($project['detail']);
$image = ($project['userfile']);
?>
<div class="item view view-eighth <?php echo $projectclass; ?>">
<img class="img-responsive" src="<?php echo base_url('fassets/images/projects/'. $image);?>" />
<div class="mask">
<h2><?= $title ?></h2>
<div><?php echo (strlen($project['detail'])>50)?(substr($project['detail'],0,200).'...'):$project['detail']; ?></div>
<a class="info ajax projects" href="<?php echo base_url("maincontroller/pdetail/".$project['id']);?>" >In Large</a>
</div>
</div>
<dir id="catdetail"><?= $categorydetail;?></dir>
<?php }} ?>
</div>
</div>
this is my javascript code is:
$(function() {
var owl = $('.categories').owlCarousel({
rel: 'gal',
width: "100%",
initialWidth: "0",
initialHeight: "0",
height:"100%",
// loop :false,
// margin :10,
// nav :false,
previous: "<i class='fa fa-chevron-left'></i>",
next: "<i class='fa fa-chevron-right'></i>",
close: "<i class='fa fa-times'></i>",
current: "",
responsive:{
0:{
items:1
},
600:{
items:2
},
1000:{
items:4
}
}
})
/* animate filter */
var owlAnimateFilter = function(even) {
$(this)
.addClass('__loading')
.delay(70 * $(this).parent().index())
.queue(function() {
$(this).dequeue().removeClass('__loading')
})
}
$('.btn-filter-wrap').on('click', '.btn-filter', function(e) {
var filter_data = $(this).data('filter');
/* return if current */
if($(this).hasClass('btn-active')) return;
/* active current */
$(this).addClass('btn-active').siblings().removeClass('btn-active');
/* Filter */
owl.owlFilter(filter_data, function(_owl) {
$(_owl).find('.item').each(owlAnimateFilter);
});
})
})
i solved this problem by creating javascript function
JS Func
function cat_detail(str) {
document.getElementById("cat_detail").innerHTML = str;
// alert(str);
}
After that i call event click on button and pass the string to the function.
<button class="btn-filter" onclick="cat_detail('<?= $categorydetail ?>')" data-filter=".<?php echo $categoryclass; ?>"><?php echo $categoryname; ?></button>
and create a div with ID "cat_detail" which display the detail. :)

How to create dymaic object by appending one value at the end in Javascript?

I have a flexslider with one video. The code is like this:-
HTML:
if(count($bannerlist)>0)
{
$v = 0;
foreach($bannerlist as $key=>$row)
{
if($row['Banner']['media_type'] == 'i')
{
?>
<li>
<img src="<?php echo $this->webroot.$row['Banner']['image_name']; ?>" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<!--<h3>Assurance</h3>-->
<p><?php echo $row['Banner']['description'];?></p>
<!--<a class="linkView" href="#">View Details</a>-->
</div>
</div>
</div>
</div>
</li>
<?php
}
else if($row['Banner']['media_type'] == 'v')
{
$v++;?>
<li id="slide<?php echo $v;?>">
<video id="myVideo<?php echo $v;?>" class="classFlexVideo" autoplay loop>
<source src="<?php echo $this->webroot.$row['Banner']['image_name'];?>" type="video/mp4">
<!--<source src="<?php echo $this->webroot?>images/Balasore.webm" type="video/webm; codecs=vp8, vorbis">-->
</video>
<img src="<?php echo $this->webroot?>images/bg3.jpg" />
<div class="flexCaption">
<div class="container">
<div class="col-md-6 pull-right">
<div class="valiGn">
<h2><?php echo $row['Banner']['title'];?></h2>
<p><?php echo $row['Banner']['description'];?></p>
</div>
</div>
</div>
</div>
</li>
<?php
}
}
}
Javascript/Jquery:-
$('.flexslider').flexslider({
animation: "slide",
direction: "vertical",
animationLoop: false,
directionNav: false,
video: true,
slideshow: false,
manualControls: ".flex-control-nav li",
itemMargin: 10,
start:function(){
/*myVideo1.play();*/
},
before: function(){
$('video').get(0).pause();
}
});
$('#vidPlay1').click(function(){ // click on first dots to play video
myVideo1.play();
});
I am fetching the images/video from the database and so there could be more than one video. In that case, the id of the video object could be like myVideo1, myVideo2, myVideo3,.... and so on. I need to write codes like myVideo1.play(), myVideo2.play(), etc.
In PHP, we can create dynamic variables like
$var = 'myHouse';
$$var then denotes $myHouse.
Is there something similar in javascript? Say for example,
var videoVar = eval('myVideo' + i);
videoVar.play();
The preferred way to access elements by their ID is to use document.getElementById, so this is what you can do:
var video = document.getElementById('myVideo' + i)
video.play()

Owl carousel - settings and styling

I'm trying to achieve a similar carousel as below (live preview):
I've been fiddling around with the settings but no luck so far despite having the same structure and classes. Here's what I have so far:
My code snippet as below:
JS:
$('#lgi__slider .owl-carousel').owlCarousel({
dots: false,
autoWidth: true,
stagePadding: 0,
margin: 15,
nav: true,
navText: ['<i class="icon-left-small"></i>', '<i class="icon-right-small"></i>'],
navContainer: '#lgi__slider',
navClass: [ 'lgi__btn lgi__btn--prev', 'lgi__btn lgi__btn--next' ],
responsive: {
0: {
items: 1,
},
768: {
items: 2,
autoWidth: false,
},
992: {
items: 3,
autoWidth: false,
},
1310: {
items: 3,
autoWidth: false,
margin: 30,
}
}
});
PHP/HTML:
<section class="lgi">
<div class="container">
<div class="lgi__block lgi__block-2">
<div class="lgi__head">
<h2 class="h0">PRODUCTS BY <?php echo $model->title ?></h2>
<p class="lgi__quote"></p>
</div>
<div class ="lgi__slider" id="lgi__slider">
<div class="owl-carousel owl-loaded owl-drag">
<?php foreach ($model->products as $product): ?>
<div class="lgi__item">
<a class="lgi__item-inner main-enterprise-image" data-enterprise-id="<?php echo $product['id']; ?>" data-image="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" data-category="<?php echo $product->productCategory->title;?>" data-desc="<?php echo $product->text_short_description;?>" data-title="<?php echo $product['title']; ?>">
<div class="lgi__block-img">
<img class="lgi__img" src="<?php echo ImageHelper::thumb(320, 320, $product->image_cover) ?>" />
<div class="overlay"></div>
</div>
<div class="lgi__title stripe">
<h4> <?php echo $product['title']; ?></h4>
<h6>
<?php echo $product->productCategory->title; ?>
</h6>
</div>
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</section>
Greatly appreciate if anyone can point out what I'm doing wrong.

Dynamically load an image inside modal

Below is my code. I am attempting to load a picture in a modal. The picture exists on the page and I am able to get the source. Is there a way to simply load the image into a modal on click as I am trying to do here? I am able to click on an image and ALERT out the source; but when I try to plug the source into the function; nothing happens.
I am using ZEND but I do not believe that is relevant to the situation at hand and so I did not tag the question with the ZEND tag.
Can anyone explain what I need to do in order to load my image in a MODAL on click?
<?php
$this->headLink()->appendStylesheet($this->baseUrl('css/default/index/designbox.css'));
$this->jQuery()->onLoadCapturestart();
?>
<!-- Modal Done Here -->
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
alert(pic1);
$(pic1).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
<?php $this->jQuery()->onLoadCaptureEnd(); ?>
<div id="designGroup">
<div id="title">
<?php echo strtoupper($this->object->GetType()); ?>
</div>
<div id="boxText">
<?php echo $this->object->GetDescription(); ?>
</div>
<?php $links = $this->object->GetLinks(); ?>
<div id="pictureBox">
<ul id="grid">
<li>
<a href="#">
<img id="<?php echo $links[0];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[0]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[1];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[1]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[2];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[2]; ?>"></a>
</li>
<li>
<a href="#">
<img id="<?php echo $links[3];?>" class="boxDES" src="<?php echo '/images/design/thumbs/' . $links[3]; ?>"></a>
</li>
</ul>
</div>
<div style="clear: both;"> </div>
</div>
This is how to build a variable that holds my IMG.
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
The below is the now fixed and complete JSCRIPT -
$('.boxDES').click(function() {
pic1 = document.getElementById(this.id).getAttribute('src');
var catIMG = $('<img/>', {
"class" :"inline",
src:pic1
});
$(catIMG).dialog(
{
modal: true,
draggable: false,
title: 'Designs',
height: 'auto',
width: 'auto',
open: function(){
jQuery('.ui-widget-overlay').bind('click',function(){
jQuery(pic).dialog('close');
})
}
}
);
});
I was able to find this information here https://stackoverflow.com/a/10788966/1583066

Categories