I hope I'm not violating any written or unwritten rules by asking for help on my business' site.
http://www.gnarlyweb.com/wrladv/
So I'm using Flexslider (but have tried at least 3 others) to handle showing multiple pieces of work on portfolio items. If you scroll to the Portfolio section, each item is clickable, and a flexslider appears. The Flexslider js is obviously working because the nav shows up, the images will animate if I have slideshow: true, but the arrows on the side do not make it move to the next piece.
I've been working on this for weeks now and can't figure it out. Does anyone know why only half of the Flexslider library works in this situation?
I know it's not Flexslider's fault, because I can put together a jsfiddle with the sources from the portfolio area and have it work perfectly.
I see all your images are in one flexslider container and they are dynamic.
I think this may cause this problem.
But i'm not pretty sure.
My suggestion is: different flexsliders for different images
You're not giving anything for the flexslider script to reference in your html. Looks like your basic html setup for your flexslider is:
<div class="portfolio-slides">
<ul class="slides">
<li><li>
</ul>
</div>
By default, the flexslider script searches for the flexslider class. You can either go into your flexslider script and add,
$(document).ready()
$(window).load(function() {
$('.portfolio-slides').flexslider({
});
});
or change your div class name to flexslider. The issue you're going to run into is that you have multiple flexsliders so you're going to have to create unique tags and have jquery call on each one otherwise all the flexsliders sync up.
Related
I almost have no experience with JAVASCRIPT, so I've searched a lot for a carousel with right & left arrows & lightbox (fancybox). & finally I found it ... but when I click left or right arrow , the all images row slide left or right. I need it to slide normally one image by one. How can I modify that, please ?
Here is an image describe how the carousel look
I already done with copying the carousel to my website, but the only issue is that the all images row slide left & right ... so when the user click left, the current four images got replaced with the next four images.
it's hard to write all needed codes here, I think the others Javascript files make effect on the final result. So, I attached all the needed files.Website's Files
First, I recommend you practice implementing the carousel following this instruction (be sure that you incorporate Bootstrap 4 accordingly).
https://v4-alpha.getbootstrap.com/components/carousel/#with-controls
My experience with carousel is that you would have to nest <div> deep in each image to control their placement and sliding. I had to create container per image for my carousel, so that was at least three levels deep. If you only use images alone per slide, you may be able to just use div containers alone.
Now, if you are using LightBox framework as well, then there are likely to be conflicting javascript functions. My suggestion is that if you really want the carousel, to just use images alone, and then style it accordingly by CSS scripts and not use the Lightbox. Otherwise, it is going deep in javascript and make custom adjustments.
https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
se angle brackets to force linking: Have you seen https://jsfiddle.net/rkrameshkumar71/qs6z1o4u/
enter code here
So basically, I made a simple website.
I am using bootstrap along with masonry jquery and google maps.
This is the basic page of my website.
How this website works is like when gallery is click, index page will fadeout and gallery page is faded in.
Lets go straight to the point which is my CSS. I am wondering what is wrong with it since I am encountering this problem.
My masonry images for gallery will overlap each other but if I place things out of the division class section. Everything is fine. Same goes for the google map width problem.
Things will only be ok after the window is resized manually.
Here are the SS for the problems
my entire css link
http://pastebin.com/kqWaszqF
my custom js link
http://pastebin.com/uqSvaMeT
my index page link
http://pastebin.com/eKHyJV95
As you can see, if I place all this codes for gallery and map outside of everything will be working fine and great but if I put it inside of that . This the above problem happens.
I tried everything like min-width: 100%, width: 100% or whatsoever. Seems like this problem always exist. Even if I setTimeOut to my javascript for masonry and googlemap, it works sometimes but not perfect as it also fails.
Can some kind soul please help me out here?
You need to provide a fiddle with html so i can test it in order to help you.
I am using grid loading effect to show my image gallery. Today I decided to add a filter option to the gallery, but I encounter a problem. When I use one of the filter options the images do not slide up together, but stay in the same position they were when all images are showed. Is there any way to make them slide together?
This is what I use for gallery: http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/
And for the filter: http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox/
I tried to put it all together in jsfiddle, but for some reasone the grid loading effect did not work there! So this is what I am using so far: http://pastebin.com/NpuKRJvb
Here is the pics.
All: http://i.imgur.com/xeEtSOu.jpg?1
Filter: http://i.imgur.com/lIGTQ7M.jpg?1
I also want to point out that I'm not very familiar with javascript.
p.s. Sorry for my bad English. If there are mistakes please edit, so I could learn! :)
I'm using a thumbnail slider on my site and it loads the images vertically for a split second before arranging them properly.
There are no errors in the console so im unsure how to approach this.
Any tips are greatly appreciated.
http://breakingcapital.com/
Nice site. I think the best answer will be to add a class with display: none to your images and remove it once the plugin has finished. I assume the vertical issue is to do with the way your markup displays the images, before the javascript kicks in.
Another solution which is not ideal will be to move the slider logic into the <head></head> as opposed to below the body, but that will slow down the initial load-up of your site.
On this page here, http://themes.truethemes.net/Karma-HTML/index-jquery-1.html, at the bottom of the page there is a Testimonial slider made probably with jQuery. I'd like to make something similar but without the navigation. Something with auto height and fade effects. It also must be flexible, if I want to add an extra slide or something I just want to create a new <div> with a class. Could somebody point me in the right direction, or show me to a plugin? Thanks
I have used this one before. It is not the flashiest, but it is easy to configure, and works with text. A lot of sliders only work with images.
http://cssglobe.com/post/3783/jquery-plugin-easy-image-or-content-slider