Hello there.
Can you please tell me how to insert an image gallery with lightbox?
Thank you.
Well that depends on which lightbox, there are several choices.
I think most probably use http://fancybox.net/ You'll need to follow their info on setting the CSS/JS calls. You should be able to use the BSS apps drag and drop probably for all the HTML setup.
Saj
After reading this post, I went to look at fancybox. I found their "how to use" instructions completely impenetrable. I think if you already know how to use it, they would make sense.
In addition, the OP's question was not answered--how do you insert an image gallery with lightbox in BSS? As a newbie, I would really like to know how you do this.
From the Creators: "We are preparing a comprehensive video tutorial right now that includes how the Thumbnail component is used and how to combine it with a lightbox script to build a gallery. It should be ready later this week."
So stay tuned!
I just finished creating and sharing a Basic fancyBox Gallery component for this. It uses v2.1.5 of fancyBox, commercial use requires a license.
Saj
I have successfully inserted a Wowslider gallery but am not at a computer to type it all so I will be happy to do so tomorrow.
maybe the best solution for me its a ready made component so drag and drop (like saj's solution - thank you saj!) but with the ability to change in options images etc.
Yup, my component is just a row with 6 Hero images to get you started, using collapsible cols-sm-4. You can change the images it uses no Custom Code component. You can see the HTML on how it's done etc... If you have questions just ask.
Maybe @iangdesign could even provide a user component of his version of lightbox as well as @jo with her wowslider. The availability of more options is always a good thing. :)
Saj
Saj how about a version of lightbox gallery the same way like your fantastic component carousel hero? :) :) :)
Are you thinking the Carousel Hero then if you click an image it brings up a lightbox of that image? Or are you thinking of clicking something and that does a lightbox of the Carousel Hero. Either choice could a bit of work to do. The fancyBox that I setup can do a slideshow of the gallery which is just adding a trigger in the myfancybox.js which is by default turned off.
Just change the myfancybox.js code
Before
$(function() {
$(".fancybox").fancybox({
helpers: {
title : {
type : "inside"
}
}
});
});
After
$(function() {
$(".fancybox").fancybox({
autoPlay: true,
helpers: {
title : {
type : "inside"
}
}
});
});
Saj
No i had in mind somwething like the lightbox component you have now but with controls of the component like the carousel has the ability from too menu to add more slides. The same way a gallery with 6 lightbox image and you can add new image the same way you add slides in carousel.
I really dont know much and dont know how possible is that so please excuse me if im saying silly stuff.
To describe it better how i imagine that. Drag the component to stage
Click on the thumbnails and load my images
Add more images if i like. Or delete them and keep only three for example.
I dont know if you can understand but the same way for example that adobe muse (i use it) has an image gallery widget.
Ah ok, well that's already all there. It's just getting used to using the Bootstrap Studio app.
For testing purposes
- start a new project in the app
- install my Basic fancyBox Gallery component
- drag & drop that component to the new project either on to the BODY element in the Overview pane on the bottom left of the app or directly into the Layout View pane
- below the Layout View pane on the bottom left click on the HTML pane to expand
Now you can see the HTML that was used to create the gallery
to edit/change an image
- Design pane on the bottom right of the app right click on the Images menu and select Import Image then find your image and import it do this for all your images
- Layout View pane - select one of the images
- Options pane - in the Image Options section click on FROM LIBRARY button and select your image
- Overview pane - the current selected image should be highlighted blue click on the "link" above it
- HTML pane - click on the ATTRIBUTE pane below to expand it scroll to title and change the wording you want displayed for the image
- Options pane - in the Link Options section in the URL field type in the images file name
to add/delete columns
- Layout View pane select an image
- Overview pane - the current selected image should be highlighted blue click on the "Column" above it
- to delete column - in the Options pane - click on the "Delete" icon (trash can)
- to add column - in the Options pane - click on the "Duplicate" icon (double window)
- follow "to edit/change an image" section above
Saj
@ Saj (and anyone else that may have a clue on this that I dont' have lol): Not sure if this is just how it is, or if this is a Mac quirk, but I cannot drag and drop your FancyBox Lightbox to anywhere except at the very top of the Body. In other words, it will only let me drop it just under the opening body tag.
I have this with all container components. It won't let me use a container anywhere other than the main body component (wrapper). I cannot put a container inside anything else.
I've posted the instruction for using a WowSlider gallery in the Tips & Tricks if anyone is interested. Here's the link: How to Add a WowSlider Gallery to Bootstrap Studio
My best guess is that you are trying to nest containers which is not allowed http://getbootstrap.com/css/#overview-container.
The app doesn't want you to do that so the app restricts it from happening. Remember the app Devs are trying to keep semantic Bootstrap coding.
I would suggest that you drag it to the body and then drag the row to where you want it since you probably already have a container as a parent element somewhere in your code.
Saj
Ah I see now. Hmm that does pose an issue for me with my template being setup the way it is because it will only allow one container in the entire site lol. You'd have to take a look at the source to see what I mean, but I used a container as a wrapper around a 2 column (right side bar type) setup. So I don't believe I have any other containers in my entire site that I'm aware of (although I may have added a container class to something somewhere, can't be sure I didn't lol). Still wrapping my head around this new way of designing so some of this responsive Bootstrap stuff still catches me.
Anyways, if it needs a "container" then I won't be able to use it I guess?
You can see what I mean by checking the source code here here: http://eiwd.work/fpcbm-bss-test
:) well a little over thinking. Since you have a container that will be a parent container, your covered already.
Good use
< body>
<div class="container">/* parent container */
<div class="row"></div>
</div>
< /body>
Good use
< body>
<div class="container">/* parent container */
<div class="row">
<div class="col-md-4">
<div class="row"></div>
</div>
</div>
</div>
< /body>
Bad use
< body>
/* bad no parent container */
<div class="row">
<div class="col-md-4">
<div class="row"></div>
</div>
</div>
< /body>
I see you have the classes .container and .container-fluid for the same DIV right after the body element, that is your parent .container/-fluid and you don't need any others that would end up being a child element of it. Also it should be either one or the other not both classes.
If you switch to .container-fluid your site will slightly widen. You have a few other areas where you have .container-fluid that should really be .row since it's direct children elements are .col-...
All in all though don't bother changing your site, I don't want you to break your working site :)
You should be able to just drag/drop the .row out of my fancyBox component to where you want it in your code once you first dropped the component into the BODY.
Saj
I'll give the drag and drop out of the container a try and see how that goes, should work good. I don't have a good grasp on this container stuff yet, used to use containers all over the place, but apparently it's not correct to do that anymore so... I'm learning lol. Thanks much for that heads up on it.
As for why I have container container-fluid, its because of the transparent layers I have behind the content. When I try to use just container it doesn't fit right so I had to add the container fluid in order for it to form correctly. No doubt I probably did it the hard way as usual lol. It works though so yeah I think I'll just leave it alone for now and if you have other suggestions for how to achieve the added layers that I am trying to do I'm all ears (ok eyes haha). I do tend to over think things, it's a defect that I've probably always had and always will, but I eventually get the hang of things. I think I did pretty good for my first site with this App though, and with the partial knowledge I have on some of the Bootstrap concepts. This app is what finally made the mobile first setup click for me in how it works with Bootstrap. Couldn't get my mind around no matter how hard I tried for some reason. Every time I thought I had it... I didn't haha. I think I have it now though thanks to BSS (THANKS BSS DEVS!).
I'm most definitely open to suggestions on this site on how to structure it better though. Thanks on the help with the script and I'll post if I can't get it to work. Appreciate your assistance so far. :)
I've cleaned up quite a bit of my "container" issues I think, hopefully it looks much better now. The only one(s) left are if they were in the menu because it's such a horrendous piece of code I don't want to mess with it and break it.... again... lol. Let me know if you see any more that I missed or anything else I can correct, your feedback is most appreciated. :)