I'm currently trying to build a mobile image gallery using PhotoSwipe.
I've been able to get it working but there's one small problem. When I
click on a photo thumbnail, the actual photo always takes up the entire
viewport. This is OK when you're viewing the gallery on a mobile device.
But if your viewport is a computer screen and the image isn't a
high-res one, the photo can be very blurry. I'd rather limit the photo
to a width of maybe 300 to 400 pixels when viewed on a computer. Is there
a way to do this in PhotoSwipe? I read the documentation but couldn't
quite figure it out. I've enclosed my code below.
Thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>PhotoSwipe - jQuery Mobile Version</title>
<link rel="stylesheet" href="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<link rel="stylesheet" href="lib/photoswipe/photoswipe.css" />
<link rel="stylesheet" href="css/mediaqueries.css" />
<style type="text/css">
div.gallery-row:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
div.gallery-item {
float: left;
width: 33.333333%;
}
div.gallery-item a {
display: block;
margin: 5px;
border: 1px solid #3c3c3c;
}
div.gallery-item img {
display: block;
width: 100%;
height: auto;
}
#Gallery1 .ui-content, #Gallery2 .ui-content {
overflow: hidden;
}
</style>
<script type="text/javascript" src="lib/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="lib/jquery.mobile-1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<script type="text/javascript" src="lib/simple-inheritance.min.js"></script>
<script type="text/javascript" src="lib/jquery.animate-enhanced.min.js"></script>
<script type="text/javascript" src="lib/photoswipe/code-photoswipe-jQuery-1.0.11.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('div.gallery-page').live('pageshow', function(e) {
// Re-initialize with photos for the current page
$('div.gallery a', e.target).photoSwipe();
return true;
});
});
</script>
</head>
<body>
<div data-role="page" id="Home">
<div data-role="header">
<h1>PhotoSwipe</h1>
</div>
<div data-role="content" >
<p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>
<ul data-role="listview" data-inset="true">
<li>First Gallery</li>
<li>Second Gallery</li>
</ul>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
<div data-role="page" id="Gallery1" class="gallery-page">
<div data-role="header">
<h1>First Gallery</h1>
</div>
<div data-role="content">
<div class="gallery">
<div class="gallery-row">
<div class="gallery-item"><img src="images/01-thumb.jpg" alt="Image 1" /></div>
<div class="gallery-item"><img src="images/02-thumb.jpg" alt="Image 2" /></div>
<div class="gallery-item"><img src="images/03-thumb.jpg" alt="Image 3" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/04-thumb.jpg" alt="Image 4" /></div>
<div class="gallery-item"><img src="images/05-thumb.jpg" alt="Image 5" /></div>
<div class="gallery-item"><img src="images/06-thumb.jpg" alt="Image 6" /></div>
</div>
<div class="gallery-row">
<div class="gallery-item"><img src="images/07-thumb.jpg" alt="Image 7" /></div>
<div class="gallery-item"><img src="images/08-thumb.jpg" alt="Image 8" /></div>
<div class="gallery-item"><img src="images/09-thumb.jpg" alt="Image 9" /></div>
</div>
</div>
</div>
<div data-role="footer">
<h4>© 2011 PhotoSwipe</h4>
</div>
</div>
</body>
</html>
PhotoSwipe has a modal option:
var options = {
modal: false
}
var gallery = new PhotoSwipe( someElement, PhotoSwipeUI_Default, someItems, options);
gallery.init();
which makes the PhotoSwipe container take only the size of its parent when set to false.
You can put Photoswipe markup (root element with class pswp) to any container with position: relative and edit photoswipe.css or add to your stylesheet something like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photoswipe in container</title>
<style>
#myContainer {
position: relative;
/* other container styles */
}
.pswp {
position: absolute!important;
}
</style>
</head>
<body>
<div id="myContainer">
<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
<!-- standard markup omitted -->
</div>
</div>
</body>
</html>
I do not know of an automatic way to do this, what i did was to put the .pswp div inside of a container div with fixed width and height and then position that container div via JS + CSS in the center of the screen.
Use a basic setup as described on the photoswipe documentation with the pswp div already added and then:
HTML
<div id="pswp-container">
<div class="pswp">
...
</div>
</div>
CSS
#pswp-container {
position: fixed;
left: 100px;
right: 100px;
top: 100px;
bottom: 100px;
}
.pswp {
position: relative !important;
}
JS
// Centers the Photoswipe container in the center of the screen (call on init + resize)
function centerPhotoswipe() {
var ww = $(window).innerWidth();
var wh = $(window).innerHeight();
var $el = $("#pswp-container");
var w = $el.outerWidth();
var h = $el.outerHeight();
$el.css({
left: Math.round( (ww-w) / 2),
top: Math.round( (wh-h) / 2)
});
}
You can find a working example here at CodePen.
This should give you the desired effect and a good starting point for your own page, BUT keep in mind that it will be necessary to add your own background layer to trigger the 'close on click somewhere else' and other details that you have to fix during the opening / closing events of the popup ...
I tried all sorts of solutions to get this to work properly, including the inline gallery options (demo).
However I couldn't quite get it to work as I wanted as I needed the a specific gallery to display without showing the thumbnails first.
What I did in the end was get a basic PhotoSwipe page working which automatically loaded the images on page load to a full screen, for example using an MVC URL:
/Gallery/Index/1
then simply embed this link in a div using object:
<div id="mygallery1">
<object data="/Gallery/Index1">
Error: Embedded data could not be displayed.
</object>
</div>
This allowed me to place as many galleries as I wanted in whatever position I wanted without any interference between them.
Note though that this didn't seem to work for mobile browsers, which was fine as for screens that small I wanted a fallback option anyway to render as an overlay over the whole page due to limited screen real estate.
Related
I'm embedding some javascript into my Showit website. It is a drag and drop feature to portray a collage/mood board effect. The code is working great, but I'm having trouble resizing the images.
There is a grey box in the upper left corner of the image that is taking on any code changes. For example, right now the width/height is set to 0px, so the grey box is a tiny dot. If I increase it to 50px, it gets larger but the image stays the same size.
I'm assuming there needs to be some parent code adjustments but I'm still fresh with javascript. I'm sharing links below to hopefully help.
Thanks so much in advance!
Here's a link to the code in action
https://denofdreamers.w3spaces.com/saved-from-Tryit-2022-01-15.html
And here is a link to the code so far
https://www.codepile.net/pile/bOVJbwOm
The issue you mentioned happens because you set the width and height of the frame to 0px. I disabled the classes used via jquery.ui to place a frame on the <img> element and added a border on the <img> element.
$(function() {
$( "#draggable1" ).draggable();
$( "#draggable2" ).draggable();
$( "#draggable3" ).draggable();
});
* {
margin: 0px;
padding: 0px;
}
.container {
display: flex;
flex-wrap: no-wrap;
}
.draggableImage{
padding: 5px;
border: 5px solid #EEE;
width: 50%;
}
.draggableContainer{
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" integrity="sha512-aOG0c6nPNzGk+5zjwyJaoRUgCdOrfSDhmMID2u4+OIslr0GjpLKo7Xm0Ao3xmpM4T8AmIouRkqwj1nrdVsLKEQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js" integrity="sha512-uto9mlQzrs59VwILcLiRYeLKPPbS/bT71da/OEBYEwcdNUk8jYIy+D176RYoop1Da+f9mvkYrmj5MCLZWEtQuA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<div class="container">
<div id="draggable1" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/sJcRsatKTmC2WnNTV_hJVA/118367/screen_shot_2022-01-15_at_12_07_17_pm.png">
</p>
</div>
<div id="draggable2" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
</p>
</div>
<div id="draggable3" class="draggableContainer">
<p>
<img class="draggableImage" src="https://static.showit.co/file/_rojEJb2QBytWaRmzMySCg/118367/screen_shot_2022-01-15_at_12_06_58_pm.png">
</p>
</div>
</div>
Do the images need to be inside p elements?
Tweaking the content and styling to this seems to work.
<div id="draggable" class="draggable ui-widget-content ui-draggable" style="position: relative;left: 5px;top: -4px;background: none;width: 167px;height: 100px;">
<img src="..." style="width: 100%; height: auto;">
</div>
Updated so the img element inherits the width of the draggable div.
I want to have a fullscreen popup over the whole page, but I've only found that you need to place it at the body root
<body>
<div id="popup" >
...
</div>
<div id="page">
<div id="content" >...</div>
</div>
</body>
But that's not what I need. I need to have a fullscreen popup adding it inside the page.
<body>
<div id="page">
<div id="popup" >
...
</div>
<div id="content" >
...
</div>
</div>
</body>
The problem is that if I do this, the popup is not fullscreen, but it appears only over the "page" div, while I want it to be fullscreen
I added a live example https://www.w3schools.com/code/tryit.asp?filename=GS0R8SGBW8CS as you can see the popup is not entirely full screen
Remove style="margin:2rem" from popup div
https://www.w3schools.com/code/tryit.asp?filename=GS0RIDZF6HMF
<style>
.Docdiv
{
position:relative;
z-index: 2;
width:1000px; overflow: hidden;
position: fixed;
top: 3%;bottom: 3%;
right:183px;
color: black;
}
</style>
<div class="Docdiv" style="min-height: 100%;">
</div>
The answer was that I had a parent div with the clip style attribute. I removed it and now the popup is fullscreen. Thanks everyone.
Im trying to create a social website which has a chat sidebar, which is just like Facebook. It has a timeline with posts in one section and a chat sidebar.
I have made the chat <div> to be fixed just like Facebook chat.
Now when the total height of elements within the chat sidebar becomes more than the page height, scrollbar appears. When i scroll through it and reach the end of it, if i scroll more, now it scrolls the posts on the timeline.
So what i want to achieve is, to make chat sidebar scroll irrelative to the timeline. to make this crystal clear, i want them to scroll separately, so if i scroll chats and it reaches the bottom, if my pointer is still on the chat sidebar and i scroll nothing should happen.
I prefer to find a way without the use of jQuery. but if its not achievable with css, i would appreciate any help on javascript as well.
Great Example: Facebook
Sample from my html
<div class="outer-container">
<div class="timeline">
<div class="contents">
<div class="header"><p>Timeline</p></div>
<div class="post-items">
<div class="post">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<div class="post-block">
<div class="post-header"><p>Some Header</p></div>
<div class="post-contents"><p>Some contents</p></div>
<div class="post-footer"><p>Some footer</p></div>
</div>
</div>
</div>
</div>
</div>
<div class="sidebar right-sidebar">
<div class="chat-list">
<ul class="friends">
<div class="header"><p>Friends</p></div>
<li>
<a class="chat-item">
<div class="avatar">
<div class="frame"><img src="blabla.img" /></div>
</div>
<span class="name">James Hetfield</span>
<span class="ic ic-message"></span></a>
</li>
</ul>
</div>
</div>
</div>
Put your timeline in the timeline div and chatbar inside chatbar div. Note in the javascript I have overridden the natural behaviour of scrolling. So, when your mouse is over chatbar normal scrolling wouldn't occur.
Update: Whenever the mouse is scrolled while the cursor is over the div manually update the scrolltop property.
JSFiddle : Link
<html>
<head>
<style type="text/css">
#body{
width: 95%;
margin: auto;
}
#timeline{
width: 75%;
display: inline-block;
overflow-y: scroll;
margin: auto;
}
#chatbar{
position: fixed;
width: 15%;
display: inline-block;
max-height: 100%;
margin: auto;
overflow-y: scroll;
}
</style>
</head>
<body>
<div id="body">
<div id="timeline">
</div>
<div id="chatbar" class="scrollable">
</div>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$( '.scrollable' ).bind( 'mousewheel DOMMouseScroll', function ( e ) {
var e0 = e.originalEvent,
delta = e0.wheelDelta || -e0.detail;
this.scrollTop += ( delta < 0 ? 1 : -1 ) * 30;
e.preventDefault();
});
</script>
</body>
</html>
i am using jquery plugin pace.js, and i want that when the page is load then first the progress bar is loaded after that the content will shown,
this is my code
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
the jsfiddle will define the result of my work.
in my case the content and progress bar both will show simultaneously.
What i want: i want that first the progress bar will show and after the complition of progress bar the content will show like in this website.
Update:
This is what i try next but when the progress is complete then it will not show any contents...
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>bk</title>
<link rel="stylesheet" href="css/pace-atom.css"/>
<style>
#contents {
display: none;
}
.cover {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 1999;
background:rgb(33,33,33);
}
</style>
</head>
<body class="pace-done">
<div class="pace pace-inactive">
<div class="pace-progress" data-progress-text="100%" data-progress="99" style="width: 100%;">
<div class="pace-progress-inner"></div>
</div>
<div class="pace-activity"></div>
</div>
<div>
<div id="contents">
<img src="d3.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d2.jpg" alt=""/>
<img src="d1.jpg" alt=""/>
</div>
</div>
<script src="js/pace.js"></script>
<script type="text/javascript">
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
}
</script>
</body>
</html>
If the progress bar stuck at 99%, and if you are using Visual Studio, you have to uncheck 'Enable Browser Link' option. This will solve the incomplete progress bar issue.
Okay so an easy way to implement this is to hide all your contents until pace is done loading (I assume there is a reasoning to pace's load screen but I'm not sure).
So your contents could have an id #contents and be default display: none. You can then show the contents after pace is done like so
$(function() {
Pace.on("done", function(){
$("#contents").fadeIn(1000);
});
});
Here is a fiddle of it working http://jsfiddle.net/59caubpx/3/
Please check that you add all the file properly, like jquery.js or theme.atom.css or pace.js etc...
I want to create a fancybox with the Swipe image slider inside. By following the instructions in the how-to page of fancybox, I create a hidden div where my slider will be put.
<div style="display:none">
<div id="hidden" >
<div id="mySwipe" class='swipe'>
<div class='swipe-wrap'>
<div><b>0</b></div>
<div><b>1</b></div>
<div><b>2</b></div>
</div>
</div>
<div style='text-align:center;padding-top:20px;'>
<button onclick='mySwipe.prev()'>prev</button>
<button onclick='mySwipe.next()'>next</button>
</div>
</div>
</div>
Now I use such hidden content to populate a fancybox:
<p align="center"><a class="fancybox" href="#hidden">Click me</a></p>
Unfortunately that has some problem I have the slider with empty (or hidden?) content. In other words I am not getting the slideshow 0 -> 1 -> 2.
I suppose that this problem is caused by the 'display:none' style. In fact if I take this out, the slideshow is working, but it shows the hidden content and I don't want this.
Here I report you the head of my html:
<!-- Add JQuery -->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<!-- Add Swipe Slider -->
<script src="js/slider/swipe.js"></script>
<style>
/* Swipe 2 required styles */
.swipe {
overflow: hidden;
visibility: hidden;
position: relative;
}
.swipe-wrap {
overflow: hidden;
position: relative;
}
.swipe-wrap > div {
float: left;
width: 100%;
position: relative;
}
/* END required styles */
</style>
<!-- Add Fancybox -->
<link rel="stylesheet" href="js/fancybox/source/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="js/fancybox/source/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".fancybox").fancybox();
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {});
});
</script>
You can try to set instead of display:none
<div style="position:absolute; left:-5000px;">
In this way the result is similar as display:none (the content of the div is not visible) and you should avoid the described problem