I need to add only one image to the carousel through materialize css, but that image should stay in its position without moving when clicked on the space around the image.
<div class="carousel" >
<a class="carousel-item" href="#one!"><img src="https://lorempixel.com/250/250/nature/1"></a>
</div>
$(document).ready(function() {
$('.carousel').carousel();
});
I am able to display one image in the carousel but the image is hiding when clicked on the space around the image.
Related
I'm using colorbox on a site but haven't been able to figure out how turn off the title text when hovering over a thumbnail. I want to retain the text to use as a photo caption when you see the full size image, just hide it on the thumbnail hover state.
I've seen some js solutions to completely turn them off, which isn't what I want. I also messed around the with the colorbox js itself and was able to turn off the text for the full size image but that is the reverse of what I want. My skills are HTML and CSS... I have experimented with qtip but that is a little beyond me right now.
My HTML is basically this:
<li class="imgTitle"><a class="group1" href="images/bigPhoto.png" title="This tooltip is showing all the formatting tags like <br /> that I need to style my big photo caption <br />No one wants to see this HTML code while hovering over a thumbnail<br />Can I turn it off until you actually click the image<img src="images/thumbnailPhoto.png" /></a> </li>
Any help would be appreciated--thanks!
Try using some (hidden) element other than the title attribute, then as a setting in your colorbox, set the title option to a displayed copy of that element, for example:
HTML:
<li class="imgTitle">
<a class="group1" href="images/bigPhoto.png">
<span class="caption" style="display: none;">
I'm a caption that's not in a title attribute anymore
</span>
<img src="images/thumbnailPhoto.png" />
</a>
</li>
JS could be something like this:
$(".group1").colorbox({
title: function() {
return $(this).find("span.caption").clone().show();
},
// other settings/options here
});
Here is a fiddle similar to the above. I added the .clone() part because, when I was implementing something similar in a gallery, they disappeared after clicking once through all the images.
I'm trying to use Skrollr to fix an element to the bottom of the viewport, if the bottom of the element hits the viewport bottom. This part is fine.
The problem is, after - lets say 1000px - of scrolling, i want to continue the scrolling, while i change the above mentioned fixed element to static again.
<div class="header">Header</div>
<div class="height-placeholder" data-anchor-target="#fixed-element" data-0-bottom="display:none;" data--0-bottom="display:block;"></div>
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;" data-1000="#class:;">Fixed at the bottom for a while</div>
<div class="content">
Regular content...<br>
</div>
http://jsfiddle.net/bkccg8x5/2/
So my idea was to create a placeholder above the fixed element and when the fixed element is stuck to the bottom, i simply add this element, so when i unstuck the fixed element, it would continue to scroll normal without any jump.
The problem with this solution is that i defined a fixed height for the placeholder, and this way it will only work correctly at a certain viewport height. Makes things more complicated, that every element on the site has a fluid height, so i need a solution that will work in every resolution.
Any ideas?
I solved this by creating a 1000px tall container and when the bottom of the container is hitting the bottom of the viewport, i change the fixed element to absolute.
<div class="header">Header</div>
<div id="height-placeholder" data-0="#class:;" data-bottom="#class:unstuck;">
<div id="fixed-element" data-0="#class:;" data-bottom="#class:stuck;">Fixed at the bottom for a while</div>
</div>
<div class="content">
Regular content...<br>
</div>
Here is the demo, works fine with any height:
http://jsfiddle.net/bkccg8x5/3/
I have a slider with fixed image sizes (all pictures are the same size), and need to know please if it is possible to overlay the slider container with a frame that has a transparent middle to let the slides underneath show through. Adding the frame to each individual slide image doesn't look good, because the frame is then "ripped apart" by the image transitions. I need a frame "overlay" that stays in place and intact above the individual slides.
Any help or advice would be greatly appreciated.
You can add anything in a slider container. And you can add static content in slides container. And you can add static content in any slide.
<div id="slider1_container" ...>
<!-- custom background here
<div ...>...</div>
-->
<div u="slides" ...>
...
<!-- custom overlay here
<div u="any" ...>...</div>
-->
</div>
<!-- custom overlay here
<div ...>...</div>
-->
</div>
I am attempting to put a weekly agenda in a row of thumbnails using Fullcalendar, but the resizing doesn't seem consistent.
1) On my work monitor, the agenda table renders correctly at full screen width, then changes to being taller than the neighboring thumbnails when the screen is narrowed, and then returns to correct rendering at full width. It also renders correctly when in mobile emulation and the row switches from horizontal to vertical configuration. The screen resolution is 1920x1080.
2) At home, the agenda renders initially as taller than the neighboring thumbnails at full width, then remains taller as the horizontal dimension decreases, renders correctly in mobile emulation, then renders correctly when the screen is restored to full-width. Screen resolution is 1366x768.
The base dimensions of the neighboring images are 465x300.
Relevant code bits. The jQuery calling the calendar (in the $(document).ready() section).
$('#calendar-index').fullCalendar({
defaultView: 'basicWeek',
height: $("#imgSource").height(),
width: $("#imgSource").width(),
windowResize: function(view) {
this.height() = $("#imgSource").height();
this.width() = $('#imgSource').width();
}
});
The HTML section:
<div class="row">
<div class="col-md-4">
<div class="thumbnail text-center"><div id="calendar-index"></div>Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img id="imgSource" src="image1.png">Button Text</div>
</div>
<div class="col-md-4">
<div class="thumbnail text-center"><img src="image2.png">Button Text</div>
</div>
I've got a feeling that connecting it to a $("#imgSource").load() rather than $(document).ready() call would work, but I'm avoiding using deprecated functions if possible.
http://jsfiddle.net/sidhenimh/63e0h54o/
I found a fix for this, in case anyone else runs into a similar issue; it doesn't work perfectly, but it does at least make the horizontal scaling a lot more stable. There's a free jQuery plugin called "Datatables" that enables automatic horizontal scaling. Vertical scaling doesn't work still, but the table at least displays correctly initially regardless of monitor resolution/size.
Datatables Plugin
I am using the zoom function of Magnificic Popup:
<a class="image-popup-no-margins" href="photo.jpg"><img src="thumbnail.jpg" /></a>
I would like to see thumbnail.jpg as the background of photo.jpg while photo.jpg loads right over it. So you click thumbnail.jpg and then a big version of thumbnail shows up, as it is already in cache, and photo.jpg loads right on top of it.
Is that possible? :) Thanks!
Place this before the links you have on page:
<div style="display: none;">
<img src="photo.jpg" />
</div>
and then use library like http://www.appelsiini.net/projects/lazyload to preload the image.