I'm making a one-page website for a friend of mine. She's a fashion designer, and she would love to have a one-page website based on the "Stylish Portfolio" Bootstrap template --> http://startbootstrap.com/stylish-portfolio
However, I want to put in a lightbox gallery in the section below where it says "Some of our work".
I was thinking of getting the BlueImp Lightbox gallery or the Bootstrap Lightbox: http://www.jasonbutz.info/bootstrap-lightbox/#usage
Both match what I was looking for.
However, I have tried to insert it into the HTML-code, but without any luck!
Does anybody have any experience in inserting/adding lightbox galleries to a Bootstrap template? And if so, how should I approach this task?
Like the comments from your question, they wanted to see your code so they know where and how they can help you. It would also let us know how much code we would need to supply without actually spoon-feeding you the answers so that you can get your answers as well as still learn :)
With that, I'm gonna assume that you're a beginner and thus supply most of the codes that you need as well as explanations on what I'm doing. I'm gonna take bootstrap-lightbox as an example.
First off, you need to download the files from the site. After downloading the files, you would be able to see that this contains 4 files, namely bootstrap-lightbox.css, bootstrap-lightbox.js and their min files. (min files are just compressed versions of the files in order to lessen its size)
Now, it's basically just needing to plug-in those files into your project.
Assuming that you put the files into their respective js and css folders in your project, this is how they would look like:
<link href="css/bootstrap-lightbox.css" rel="stylesheet"> //plug this inside your <head> tags
<script src="js/bootstrap-lightbox.js"></script>
After plugging those in your files, then its a matter of just using the html code that you found in the site :)
<div id="demoLightbox" class="lightbox hide fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class='lightbox-content'>
<img src="image.png">
<div class="lightbox-caption"><p>Your caption here</p></div>
</div>
</div>
Solved.
I used BlueImp instead to insert a lightbox gallery :-)
Related
I am actually building a SPA with foalts.org.
I have placed my script.js inside the public folder. Unfortunately, this doesn't allow me to use typescript for my vue-js. Maybe someone has an idea for this, cause actually the public folder got served from foalTS framework. But this is actually not the main topic.
The maintopic is, that i want to list several divs with
<div class="row-position" v-for="order in orders" :key="order.latestPrice">
<div id="myAMchart></div>
</div>
Now I would like to be able to place an amChart (https://www.amcharts.com/) for each div. And I want that these charts follow the value of order.latestPrice. But I actually have no idea how to set up this with amCharts and vue.js
Im open to any ideas.
I was able to update one single chart but with a fixed id of the div.
I don't know how to connect the many different (dynamicaly generated) charts to the order.latestPrice field.
Thanks!
I'm trying to create a link on my vue app to local pdf files. Right now here's my problem.
My pdfs are located in assets/static/ and presently linking to them like this.
<template>
<div id="forms" class="view-wrapper">
<h3>Downloadable Forms</h3>
Claim Form
</div>
</template>
This brings up a link on the page, but when I click it, I'm taken to a blank page on my app with just the navbar and footer and nothing in between. I'm hoping to have it bring up the document in the browsers pdf viewer in another tab. Some help would be greatly appreciated.
Edit: SOLVED: #dan helped me realize that I just had to use one dot to access my assets folder.
To render a pdf in the browser use an <iframe src="path-to-pdf" />. Unless you're binding reactive data to the element you don't have to do anything different in vue. Check out https://stackoverflow.com/a/52644970/6890774 this is a similar issue.
Hi I am new to elm and would like to know if it would be possible to set up elm such that it manages only one section of a website. the rest of the site would be in plain javascript, html, css.
but i would like to load up the compiled elm app in a separate script tag and it should manage only a particular section
let us say that the website is divided into 10 divs vertically of height 300px. i would want only the 3rd div to be an elm app.
is such a thing possible? if so how can i get this working
You can use Html packages embed function for this. I once did this just to try it out, but unfortunately cannot recall any details of it. I did found some source code though.
The html page would be something like this
<html>
<head>
</head>
<body>
<div id="personnel"></div>
</body>
<script src="elm.js"></script>
<script>
Elm.Person.embed(document.getElementById('personnel'));
</script>
</html>
By including elm.js, you'll get the Elm runtime. Here Person is my compiled Elm module. Something like
module Person exposing (..)
-- Module details here...
main =
Html.beginnerProgram { model = init, view = view, update = update }
Elm code is compiled to JavaScript with command
elm-make Person.elm --output elm.js
My knowledge on this is quite limited, but I did investigate it enough to be certain that with by doing this, one can add multiple components made with Elm to an html page / existing application.
Addendum: I found the source of my information
In addition to previous answer perhps you would like to take a look on:
https://ellie-app.com/h7vqHrPdWa1/0
I ran into this issue while building my online design portfolio. It seems complex to me, but I know there is a way to do it, so I am frustrated that I can't find a solution. Please help!
My design calls for the use of media queries to optimize my site for mobile, tablets, and desktops/laptops. The mobile version has a single column of thumbnails. When each thumbnail is clicked, a hidden div is revealed below it via jQuery slideToggle, pushing down the other project thumbnails.
That is how the mobile version works and it works great. The problem is the tablet and dektop/laptop versions. For those versions, I want the the thumbnails to display in a grid pattern. Two side-by-side on tablets and three side-by-side on desktop/laptops with infinite rows for all versions. I can make them display in a grid with HTML, but the problem comes when a thumbnail is clicked and it reveals the div below it via slideToggle. Since I'm using media queries, the order of the HTML is still the same as the mobile version and the hidden divs are directly below each thumbnail in the code. Thus, revealing the hidden div pushes down all the other thumbnails, including the thumbnails in the same row as the thumbnail that is being clicked (if they come after it in the code). The last div in each row does what I want it to; the next row is pushed down when the hidden div is revealed. I want the hidden div to display below the row it is in and push down the thumbnails that are in the rows below.
And obviously I want to stick with media queries to avoid creating separate HTML, if possible.
Repeating HTML for the thumbnails and hidden divs:
<div class="body">
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
<div class="projectWrapper"></div>
<div class="thumb"></div>
</div>
I created a jsfiddle to demonstrate the problem: http://jsfiddle.net/EuHyc/13/
Please note that the divs are hidden using jQuery. Hiding them with CSS was not allowing my content within the hidden div to display properly when revealed. Also, I had to use display:inline-block because float:left does not force the hidden div to appear below it in the layout.
I hope I adequately explained the problem. Thanks in advance for any help! I sincerely appreciate it!
I've setup my Rails 3 app with only
<%= yield %>
in the application.html.erb and pages.html.erb layout files (Pages is my controller), and I have a view with only the following:
<!DOCTYPE html>
<html>
<title>My Title</title>
<body>
<iframe src="http://myiframesource.com" seamless="seamless" width="100%" height="1949px"></iframe>
</body>
</html>
But the iframe still has a border around it and does not completely fill the page when I look at it in my browser (I tried several). According to W3Schools http://www.w3schools.com/html5/att_iframe_seamless.asp
the seamless attribute should have no borders nor scrollbars and " should look like it is part of the parent document."
I'd also like to not have to tell the iframe what width/height to be, and just have it take up as much space as it needs.
Why does the seamless attribute seem to not be working right?
That's probably because your browser doesn't support seamless iframes. As far as I know it doesn't work in either Firefox 4 or Google Chromium 11, you'll have to wait until someone actually implements it. As for the iframe taking as much space as it needs I don't think that there is currently a way to do this without JavaScript. For a JavaScript solution just search the web, there are several tutorials about this.