I'm having some trouble figuring out how to modify my gallery which runs on JS Colorbox on Shopify.
My storefront link is http://chillonbroadway-2.myshopify.com/
The major problem I'm having with the gallery is whenever I make the width bigger than the default, the images inside the gallery begin to shift out of focus beginning with the 2nd slider image. I'm convinced it's something with the javascript, I'm a beginner with the language and only know how to modify jqueries or premade scripts.
Please help!
Thanks!
Related
I am building a Wordpress Theme and am using Envira to have a responsive Gallery. I want to add some CSS and javascript/jquery to add an animation to my three pictures in that gallery. I want them to appear and slide up from the bottom when scrolling to the section of that page. Here's an example of what I am looking for:
https://www.beau-rivage.ch
Basically, when you scroll down, you see those three pictures/slides coming up. I tried to google this but couldn't find any code that worked for me. So currently I do not have any code to share for this animation and the Envira Gallery pictures are just added via a shortcode. Can anyone help me and point me in the right direction?
Would much appreciate your support!
You can use animate.css (https://daneden.github.io/animate.css/) and wow.js combination if you don't want to write code manually.
Check https://wowjs.uk/ examples.
In the showcase section of this page (featured projects area), I am trying to link each photo to a dedicated page, instead of going into the JQuery light box.
Is there a way to achieve this without breaking the fade up animations and the dark overlays already present before clicking? Totally okay with scrapping the lightbox feature if neccessary, but not sure what to delete in fear of breaking the design and function.
This is a template that I have already customized with html and css. The linking to a page is the only issue I can't figure out (I'm a newby to JavaScript).
Any input would be much appreciated.
The entire site is downloadable with the style and JavaScript files for you to tinker with.
Thanks in advance,
I would like to make a news portal, where next to the post excerpts there will be an image. When you click on the image, the title or the post excerpt , the whole content will be shown (accordion / toggle effect), resizing automatically, in the responsive way, the assigned picture. How to do that on any drupal theme? Example – news.google.com
Graphic explanation: http://imgur.com/a/eBfjU
Maybe there is an extension / module or template that allows for a simple adaptation of such a solution? I know there are accordion plugins, but I do not know how to apply them to the images auto-expand on-click along with content.
Thank you!
This is more front-end than drupal question.
And "how" - you have to make your own theme by inheriting some other (if you don't want to start from scratch).
Then, you have what will that your page be? Node in some new content type or a view or something else.
Then, find some documentation/tutorial how to theme that kind of page.
You must have some deeper understanding how the drupal works before going to real work.
I'm having trouble getting Slick.js and the Foundation clearing lightbox to play nicely together. The way I have my site set up is that there are three 'pages', but each page is a Slick.js slide, so the site is really only one actual webpage.
In my photography 'slide', I have a basic lightbox setup with Foundation. However, I cannot get the lightbox to open properly when Slick.js is enabled. It works just fine when Slick.js is disabled.
You can see a live example here: www.kcfeatures.com/services.html
Here's a working live example (slick.js is disabled): www.kcfeatures.com/services1.html
For the life of me, I cannot figure out how to get it to work. My guess is that it has to do with the slick-track? Since the slick-track div is so wide it might be messing with how the lightbox is displayed. Lightbox also normally starts at the very top of the viewport, but with slick.js enabled it starts underneath the topbar, where the slider starts.
Any help or guidance would be greatly appreciated!
Even I tried to implement something similar but slick didn't allow my clearing lightbox to work.
Suggestions/Workarounds
Try Foundation 5 Reveal modal.
Have separate divisions for every thumbnail image that would contain the large version of the image. Tweak your code to trigger the reveal modal for every thumbnail displaying the larger version. However this will not allow you to move through other images as clearing lightbox would do. (You can implement a slick slider inside your reveal modal div to make that happen.)
How about using Foundation Tabs ?
I saw your website, except for the slide in effect of photography, videography and web design divs there is no need specific need for slick usage. I believe you can use Foundation Tabs and implement the same (Using clearing lightbox will be super easy now). If you want animation for your tabs you can refer Jquery Slide animations and implement the same for your tabs. You can also refer Foundation Tabs animation using this.
I have installed "Easy Nivo Slider" plugin for WordPress in order to show a slideshow in the heading of the site I'm working on and it seems that the plugin generates things like thumbnail navigation and etc inside the IMG tag with javascript. I have never seen this method before and all the changes (margins, paddings) have no effect even close to what I'd like to get. Basically, what I want is to have a slider with a title and description place and thumbnail navigation (whereas the thumbnail is not the smaller image of it, but another one, custom one, defined in a post's custom fields (I think I can do that myself). All I need is to be able to use CSS however I want it to, because right now the only function that actually responded was the font-size.
You can see the half-done site live at http://work.codera.in/re to get a look at the code and to get a glimpse of how I want to be able to modify it in the end result is here: https://minus.com/lbyerG4OncvwdZ
Why don't you try http://wordpress.org/extend/plugins/simple-nivo-slider/ or http://wordpress.org/extend/plugins/wp-nivo-slider/ . From what i can see here wordpress.org/extend/plugins/easy-nivo-slider/ easy nivo plugin appears to be broken.