I am trying to customize Sorgalla carousel styles but experiencing some difficulties - more exactly, with the right border of the last list item which is shown in the viewport of the carousel. It is simply disappearing, please take a look at it:
http://jsfiddle.net/orinoco_omi/cy7y9j7x/
Here is HTML Code:
<div class="wrapper">
<div class="jcarousel-wrapper">
<div class="jcarousel">
<ul>
<li>
<img src="img/img1.jpg" alt="Image 1">
<h4>Check-up and evaluation services</h4>
<p>A nice & short description of the service </p>
</li>
<li><img src="img/img2.jpg" alt="Image 2">
<h4>Check-up and evaluation services</h4>
<p>A nice & short description of the service </p>
</li>
<li><img src="img/img3.jpg" alt="Image 3">
<h4>Check-up and evaluation services</h4>
<p>A nice & short description of the service </p>
<p>A nice & short description of the service </p>
</li>
<li><img src="img/img4.jpg" alt="Image 4">
<h4>Check-up and evaluation services</h4>
<p>A nice & short description of the service </p>
</li>
<li><img src="img/img5.jpg" alt="Image 5"></li>
<li><img src="img/img6.jpg" alt="Image 6"></li>
</ul>
</div>
‹
›
<p class="jcarousel-pagination"></p>
</div>
</div>
Any margin I set out for the li items (I want them to be separated like here, http://comtechguys.com/slider1/index.html) causes the disappearing of the right border. I guess the problem is in .jcarousel div. I tried to set padding to it, so that my list could fit in, but useless. I also tried to change it's size, set margins... didn't help. Is there anything I am missing out?
Related
So I've been trying to figure out the best way to use both of these libraries together, but I've been having a hard time.
The best thing I've found is this CodePen (https://codepen.io/ezra_siton/pen/XNpJaX) but it seems incredibly overcomplicated and I personally haven't been able to get it to work on my own project. Especially the function;
var initPhotoSwipeFromDOM = function(gallerySelector) {
... omitted this because the function is huge. This is here because
SO doesn't allow codepen links without a code block for some dumb reason.
}
I'm also using VueJS, but I don't think that really makes a difference.
All I want to happen is say I have a carousel of 6 images (3 on each "page"). I want it so that if you click the 3rd image, in Photoswipe it also goes to the 3rd image, and if you then go to the 4th image inside the lightbox gallery, it also makes the carousel go to the next page as well in the background if that makes sense.
I ideally want to do this all in native/es6 JS and I want to avoid dependencies like JQuery.
The codepen you provided is exactly how this needs to be done and it is explained well there. The function you mentioned is actually the basic setup from the photoswipe getting started page with one modification to make the swiper index match upon closing photoswipe:
/* EXTRA CODE (NOT FROM THE CORE) - UPDATE SWIPER POSITION TO THE CURRENT ZOOM_IN IMAGE (BETTER UI) */
// photoswipe event: Gallery unbinds events
// (triggers before closing animation)
gallery.listen("unbindEvents", function() {
// This is index of current photoswipe slide
var getCurrentIndex = gallery.getCurrentIndex();
// Update position of the slider
mySwiper.slideTo(getCurrentIndex, false);
});
Other than that part there isn't anything there that is out of the norm for setting up swiper and photoswipe independently. Just follow the normal instructions for each script, and make sure to structure the html correctly like done in the pen because that is what allows them to function together:
<!-- Slider main container -->
<div class="swiper-container">
<!-- Additional required wrapper -->
<ul class="swiper-wrapper my-gallery" itemscope itemtype="http://schema.org/ImageGallery">
<!-- Slides -->
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/602" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/602" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/AB47BC/ffffff?text=Zoom-image-2" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/AB47BC/ffffff?text=Thumbnail-image-2" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/EF5350/ffffff?text=Zoom-image-3" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/EF5350/ffffff?text=Thumbnail-image-3" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="http://placehold.it/1200x600/1976D2/ffffff?text=Zoom-image-4" itemprop="contentUrl" data-size="1200x600">
<img src="http://placehold.it/600x300/1976D2/ffffff?text=Thumbnail-image-4" itemprop="thumbnail" alt="Image description" />
</a>
</li>
<li class="swiper-slide" itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
<a title="click to zoom-in" href="https://picsum.photos/1200/603" itemprop="contentUrl" data-size="1200x600">
<img src="https://picsum.photos/1200/603" itemprop="thumbnail" alt="Image description" />
</a>
</li>
</ul>
I am developing a mobile app using jquery mobile. I am looking to implement a "tips" section. A tip will be visible on the screen, and with a side swipe, I would like to view another tip.
I was under the impression JQM would have a simple carousel type widget... that can be loaded with html content. That does not seem to be the case.
P.S. I am not looking for an image slider specifically, I want to slide and randomize a carousel that can be loaded with html elements (text).
Anyone have some ideas on what plays well with jquery mobile for mobile apps? (Cordova)
I've used Flex-slider and served me quite well.
Working Demo
Product link
Initialization:
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlsContainer: ".flex-container"
});
});
Markup
<!-- slider -->
<div class="flex-container">
<div class="flexslider">
<ul class="slides">
<li>
<img src="slides/1.jpg" alt="slide">
<p class="flex-caption">Awesomeness</p>
</li>
<li>
<img src="slides/2.jpg" alt="slide">
<p class="flex-caption"> «Fantastic »</p>
</li>
<li>
<img src="slides/3.jpg" alt="slide">
<p class="flex-caption"> « Wow »</p>
</li>
</ul>
</div>
</div>
I'm still new to this game and so i'm likely doing something daft, but i'm not too sure what that is. I have a portfolio site built using Bootstrap3. In this i'm loading in an unsorted list of images in the full page there are about 40 or so at the moment. These load in slowly and out of sync so i was trying to apply the lazyload plugin to help with this. My image list is linked to a couple of filters which shows/hides them according to their li class.
The filters work fine. However when I have tried to get Lazyload to work, and I click on the filter before all the images have loaded, they get the pre-loaded grey box image.
You can see it in action here. http://megmackayphoto.com/Beta/portfolio4.html
I've also added a JSfiddle here: http://jsfiddle.net/iameuanmackay/w5kwwjpm/ with a cut down list of images (which are not showing on the fiddle for some reason). The code i have is here, though i appreciate this does not really show the issue.
<div class="container-fluid">
<div id="portfolio">
<div class="row">
<div data-spy="affix" data-offset-top="0" data-offset-bottom="200">
<!-- this is the control to show which images appear -->
<ul id="filter">
<li style="list-style-type: none" class="all">all</li>
<li style="list-style-type: none" class="people">people</li>
<li style="list-style-type: none" class="things">things
</li>
</ul>
</div>
<!-- end affix -->
</div>
<ul id="portfolio">
<li class="people">
<img class="lazy img-responsive" src="http://www.megmackayphoto.com/Beta/lib/img/transparent.gif" dataoriginal="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/140220_MabelFlwrCrwn_056.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/140220_MabelFlwrCrwn_129.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/131017_FlowerWall_215.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/131017_FlowerWall_233.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/130907_3DayPortraits_151.jpg" width="185" height="185">
</li>
<li class="people">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/people/130907_3DayPortraits_140.jpg" width="185" height="185">
</li>
<li class="things">
<img class="lazy img-responsive" data-original="http://www.megmackayphoto.com/Beta/lib/img/thumbs/things/130712_PeachWedding_147.jpg" width="185" height="185">
</li>
</ul>
</div>
</div>
<!-- End row -->
</div>
<!-- End portfolio -->
</div>
<!-- end container -->
Additionally there is a lazyload trigger here with this code which comes before my filter triggers.
$(function () {
$("img.lazy").lazyload({
no_fake_img_loader: true
});
});
As I alluded to, i'm probably doing something really stupid but I can't figure it out. Any help would be very much appreciated. If i'm missing any vital information here, please shout and i'll try give more pointers/info.
Thanks
I have made on the basis of the script BxSlider slider on its website.
Structure slider is as such:
<ul class="slider-cont">
<li>
<img src="images/slide-1.jpg" alt="">
<div class="caption">caption1.</div>
</li>
<li>
<img src="images/slide-2.jpg" alt="">
<div class="caption">caption2</div>
</li>
<li>
<img src="images/slide-3.jpg" alt="">
<div class="caption">caption3</div>
</li>
</ul>
Caption is over the image and is the way to the left of the slider. My question is whether it is possible using CSS3 or JS to do the same animation to make the text more quickly, "rolling off" and "rode" than the picture? I tried using the tool in the bxslider. OnSlideBefore or OnSlideAfter but I managed to get this effect.
I've been implementing the code for the flex slider which allows links/buttons outside of the flex slider to target specific slides with rel tags as provided by LJ902 here:
jQuery FlexSlider hide Slider but retain visibility of Manual Controls
Now I'm curious how I would be able to change the css state of the targeting link/button (giving it a different colored background to indicate it's active state), when the flex slider is positioned within a section of slides.
So for instance in the example below, when the slider at a state between the images images/section2-Image01.jpg thru images/section2-Image03, the css state of slide-thumb link for Section 2 is changed , for the slides in section 3 the css state of slide-thumb link for Section 3 is changed and the styling for section 2 goes back to it's previous state. In essence creating tab like functionality that flows over when the users slides/clicks though into the next section
<a rel="0" class="slide_thumb" href="#">Section 1</a>
<a rel="3" class="slide_thumb" href="#">Section 2</a>
<a rel="6" class="slide_thumb" href="#">Section 3</a>
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/section1-Image01.jpg" />
</li>
<li>
<img src="images/section1-Image02.jpg" />
</li>
<li>
<img src="images/section1-Image03.jpg" />
</li>
<li>
<img src="images/section2-Image01.jpg" />
</li>
<li>
<img src="images/section2-Image02.jpg" />
</li>
<li>
<img src="images/section2-Image03.jpg" />
</li>
<li>
<img src="images/section3-Image01.jpg" />
</li>
<li>
<img src="images/section3-Image02.jpg" />
</li>
<li>
<img src="images/section3-Image03.jpg" />
</li>
</ul>
</div>
Could anyone help me out with this? My mediocre development skills have been stumped by this over the last day or so.Thanks!