I have implemented the blueimp carousel (2.22.0) on a gallery page. It works fine and is displaying the images in the carousel. But it is also showing all the images below the carousel in a quasi light box style. This is my code.
<link href="~/Content/Css/blueimp-gallery.min.css" rel="stylesheet" />
<div class="page-header">
<h2>#Model.Name</h2>
</div>
<!-- The Gallery as inline carousel, can be positioned anywhere on the page -->
<div id="blueimp-gallery-carousel" class="blueimp-gallery blueimp-gallery-carousel">
<div class="slides"></div>
<h3 class="title"></h3>
<a class="prev">‹</a>
<a class="next">›</a>
<a class="play-pause"></a>
<ol class="indicator"></ol>
</div>
<div id="links">
#foreach (GalleryViewItemVM item in Model.Images)
{
<a href="#item.ImagePath" title="">
<img src="#item.ThumbPath" alt="">
</a>
}
</div>
<script src="~/Scripts/blueimp-gallery.min.js"></script>
<script>
blueimp.Gallery(
document.getElementById('links').getElementsByTagName('a'),
{
container: '#blueimp-gallery-carousel',
carousel: true
}
);
</script>
For completeness I am using razor and bootstrap 3 although I don't think this relevant.
The <img> tag within the <a> tag is unneccesary and is causing the unwanted behavior.
Related
I'm trying to make an FAQ page using an accordion. In some of the answers I tried to make a clickable link, that will direct you to another question (I don't want the page to refresh).
With what I have now, the opened question (containing the link) will close the accordion after clicking, and open the desired accordion. The only thing missing is that the page will not scroll to the new question.
What I've got:
function openQuestion(q) {
jQuery('.accordion-toggle').removeClass('active');
jQuery('.accordion-container').fadeOut(500);
var accordions = jQuery('.accordion-toggle');
var accordion = accordions[q - 1];
jQuery(accordion).addClass('active');
jQuery(accordion).next('.accordion-container').slideToggle(500);
}
I assume the next jquery line would contain something with scrollIntoView. But no succes yet.
This is what I use in HTML
text
<div class="entry">
<h3>FAQ</h3>
<p>...</p>
<div class="clear"></div>
<div class="accordion wrapper">
<h3 class="accordion toggle active">
...
</h3>
<div class="accordion-container" style="display: block;">
<div class="content-block">
<span style="font-weight: 400;">...</span>
</div>
</div>
<!-- end accordion container -->
<h3 class="accordion toggle">...</h3>
<div class="accordion-container" style="display: none;">...</div>
<!-- end accordion container -->
</div>
</div>
I have previously tried materialboxed for card images and it worked.
But when I use materialboxed for carousel images the result is different, not as good as the card image.
The fixed navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
I have tried to edit css from materialize but still can't.
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
the result image materialboxed in carousel
You wrote:
The navigation bar and any of the elements below also look different from the card image, for which all the surrounding elements are invisible.
Does this mean that when you are using the class materialboxed with the img tags in the carousel that the rest of the page does not become invisible/blacked-out when you click on the image?
Perhaps you have more code in your document that you did not share?
I was able to achieve the materialboxed effect in your carousel with this code:
<!DOCTYPE html>
<html>
<head>
<!-- IMPORT MATERIALIZE CSS-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
</head>
<body>
<nav>
<div class="nav-wrapper">
Logo
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>JavaScript</li>
</ul>
</div>
</nav>
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1" class="materialboxed"></a>
<a class="carousel-item" href="#two!"><img src="https://lorempixel.com/250/250/nature/2" class="materialboxed"></a>
<a class="carousel-item" href="#three!"><img src="https://lorempixel.com/250/250/nature/3" class="materialboxed"></a>
<a class="carousel-item" href="#four!"><img src="https://lorempixel.com/250/250/nature/4" class="materialboxed"></a>
<a class="carousel-item" href="#five!"><img src="https://lorempixel.com/250/250/nature/5" class="materialboxed"></a>
</div>
<!-- IMPORT MATERIALIZE JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<!-- INIT CAROUSEL -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.carousel');
var instances = M.Carousel.init(elems);
});
</script>
<!-- INIT MATERIALBOXED -->
<script>
document.addEventListener('DOMContentLoaded', function() {
var elems = document.querySelectorAll('.materialboxed');
var instances = M.Materialbox.init(elems);
});
</script>
</body>
</html>
See screen grab for result.
EDIT 2020-10-23:
Several assumptions for the following:
materialize.js is now local to the html file instead of imported from CDN. Also, the <nav> tag is now wrapped in a div with class="navbar-fixed" and id="fixed-nav":
<div id="fixed-nav" class="navbar-fixed">
<nav>
{...}
</nav>
</div>
In comments, OP clarified that he doesn't like the behavior when using materialboxed + carousel + navbar-fixed.
One solution would be to remove the class navbar-fixed from <nav>'s wrapper div when opening a carousel image and adding it back when closing.
At line 3590 and 3722 of materialize.js are the functions to open and close, respectively, an image with class materialboxed. Inside these functions, you can add the following to remove/add navbar-fixed from your wrapper with id fixed-nav:
Inside the open() function:
// remove navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.remove('navbar-fixed')
Inside the close() function:
// add navbar-fixed
let fixedNav = document.getElementById('fixed-nav')
fixedNav.classList.add('navbar-fixed')
I'm building a landing page and I encounter a problem. I have an image of a project that when is clicked will zoom in a gallery mode and on top of that image it is a link towards the Behance page of the project. But what ever I do when I click the project link is opening still the image gallery. This is my code:
<div class="row masonry-wrap">
<div class="masonry">
<div class="masonry__brick" data-aos="fade-up">
<div class="item-folio">
<div class="item-folio__thumb">
<a href="images/portfolio/gallery/LiveStreaming.png" class="thumb-link" title="Live" data-size="1617x1440">
<img src="images/portfolio/LiveStream500x625.jpg" srcset="images/portfolio/LiveStream500x625.jpg 1x, images/portfolio/LiveStream1000x1250.jpg 2x" alt=""></a>
</div>
<a href="https://www.behance.net/gallery/77261419/Live-Streaming-Landing-Page-Design" class="item-folio__project-link" title="Project link">
Project Link
</a>
<div class="item-folio__text">
<h3 class="item-folio__title">
Live Streaming Landing Page
</h3>
<p class="item-folio__cat">
UI Design
</p>
</div>
<div class="item-folio__caption">
<p>A modern touch to a simple service. UI design made in Sketch for a Live Streaming Landing Page.</p>
</div>
</div>
<!-- end item-folio -->
</div>
<!-- end masonry__brick -->
</div>
<!-- end masonry -->
</div>
<!-- end masonry-wrap -->
What do I do wrong?
I have a webpage which is the main index.html and another projects_imgs.html which will be the iframe src inside the index.html
Inside the projects_imgs.html there will be images. What I want to do is,
In index.html I want to add <a> tags that links to the images inside projects_imgs.html, so whenever the user clicks these links the iframe loads the clicked link that targets a specific image
get the idea?
So far here is the code of index.html:
<!-- Projects section -->
<div class="section projects-section" id="section4">
<div class="container-fluid">
<div class="row">
<div class="col-lg-9">
<iframe class="pull-right" width="85%" height="700px" src="projects_imgs.html" name="projects_gallery"></iframe>
</div>
</div>
<p>Images</p>
</div>
</div>
and projects_imgs.html:
<!DOCTYPE html>
<html>
<head>
<title>MH-Shukri Projects Gallery</title>
<!--- Bootstrap CSS --->
<link rel="stylesheet" href="bootstrap/css/bootstrap.css" />
<!--- Bootstrap Theme --->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" />
</head>
<body>
<style>
body {
background-color: #34312C;
}
img {
position: fixed;
width: 100%;
height: 100%;
}
</style>
<div class="row">
<div class="col-lg-12">
<img class="img-responsive" src="imgs/projects/Faf/1.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/2.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/3.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/4.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/5.jpg"/>
<img class="img-responsive" src="imgs/projects/Faf/6.jpg"/>
</div>
</div>
</body>
</html>
To implement such a logic in html only is not possible i think.
I suggest you to use PHP to implement this logic. Here is a small example:
index.html
<html>
<body>
Images: <br>
Image 1 <br>
Image 2
</body>
</html>
These links call images.html with the parameter "image". As you can see, we set "image" to 1 or 2, depends on what the user is clicking on.
images.html
<html>
<body>
<?php
if($_GET["image"] == 1)
{
echo "<img src='Image1'/>";
}
if($_GET["image"] == 2)
{
echo "<img src='Image2'/>";
}
?>
</body>
</html>
In images.html you decide with an IF Statement. If it was 1, then you just call the with the Image 1. If 2....
You can use that to implement it with your iFrame. But keep in mind that you need a webserver who understands PHP to get this running!
Have a nice day!
I actually figured it out!
I do it like this:
function setURL(url){
document.getElementById('iframe').src = url;
}
<iframe id="iframe" src="index.html" width="50%" height="250px"></iframe> <br>
A01-FAF-1<br>
A01-FAF-2<br>
A01-FAF-3<br>
A01-FAF-4<br>
A01-FAF-5<br>
A01-FAF-6<br>
Just replace the images with some random google images link to test it.
I'm having a bit o dificulty making this work.
This is my first website, I'm using Zurb and finding it good so far.
I'm trying to implement a responsive nav, but it isn't working. The one I'm trying is this one: http://responsive-nav.com/#instructions. I made everything they ask to, but it still don't work. It's the same as not adding code at all to the website.
Some of the nav's code, if it helps:
<div class="row" id="row-top">
<div class="large-4 small-8 columns logo">
<img src="img/logo.png" alt="Laboratório Morales">
</div> <!-- logo -->
<div class="large-8 small-12 columns nav">
<ul class="inline-list menu-principal">
<li>Laboratório</li>
<li>Exames</li>
<li>Convênios</li>
<li>Estrutura</li>
</ul> <!-- menu-principal -->
</div> <!-- menu-principal div -->
</div> <!-- row topo -->
Calling in the head, and bottom of body:
<link rel="stylesheet" href="css/responsive-nav.css"> <!-- responsive nav -->
<script src="js/responsive-nav.js"></script> <!-- responsive nav -->
<script>
var navigation = responsiveNav("#nav");
</script> <!-- responsive nav -->
Hm ... you are passing an id #nav. But you put nav in the class property. It should be
<div class="large-8 small-12 columns" id="nav">
Isn't it?