I have this:
<div id="container" class="loading">
<header id="gallery-header">
<div id="top-bar-gallery">
HOME
</div>
</header>
<div id="gallery-main" role="main" >
<div id="image" class="loading">
<a><img src="roma/roma2.jpg" alt"" /></a>
<a><img src="../css/images/gallery-loaderx.gif" alt="" /></a>
</div>
</div>
</div> <!--! end of #container -->
but gallery loader doesn't show? I can't seem to work it out.
Any help is much appreciated.
Are you using any JS? or do you need some solution to fade-in images after the page loads?
if you only need the images/content to fadeIn, you would need to include Jquery and then do something like this:
$(document).ready(function() {
//hides the images
$("#images").hide();
// starts a time counter so you can fade the images later on (when page loads)
var imageFader= setTimeout(function(){
$("#images").fadeIn();
},2000); // 2 seconds (adjust if needed);
});
You can also apply this method to trigger/activate functions
Hope this helps.
Related
I have a webpage on which a lot of images need to load. I want to show a div with a loading gif while the image is loading, but I want to fade out that div when the image is done loading. When I was searching the internet I found the ".load" function, but that's not working on the images. The ".on('load', function(){...})" doesn't work either.
This is what I tried, but doesn't work.
<a data-fancybox="gallery" href="image1.jpg">
<img src="thumbs/image1.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image2.jpg">
<img src="thumbs/image2.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<a data-fancybox="gallery" href="image3.jpg">
<img src="thumbs/image3.jpg" class="slideshow_image"/>
<div class="loading">
<div class="loading_image">
<img src="loading.gif"/>
</div>
</div>
</a>
<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
This is actually working fine.
https://codepen.io/tmdesigned/pen/NWqqXwy
Probably what you are experience is conflict with the gallery library you are using. They often duplicate images in the HTML to achieve their effects. I'd suggests looking at the final output in your inspector and see if the .next() logic still holds.
But, to answer your question if you remove that gallery, as I did in the link above, you'll see the 'loading' image fade out (in the example, all 6 images--3 display images, 3 loading images--are the same, but you can still see the effect).
<script>
$(".slideshow_image").on("load", function() {
$(this).next().fadeOut("slow");
});
</script>
I am building a jquery mobile webpage . I use swiper slider plug in for image gallery. But navigation buttons and and pagination not works correctly without reloading page. when visitors enter the sixth page. I just want to
automatically refresh only that page and only once. My image gallery in that page already. My html codes like this. I guess we can do reloading webpage with java script codes. But although I do a lot of research, i could not find the solution. I will be grateful if you can help me.
<div data-role="page" id="page6">
<div data-role="header">
<div class="logo"></div>
<div class="blueline"></div>
</div>
<div data-role="content" class="bodycopy"><center>Resimleri Görmek İçin Yukarı Kaydırın</center>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" ><img src="images/image-1.jpg" alt="resim-1"></div>
<div class="swiper-slide" ><img src="images/image-2.jpg" alt="resim-2"></div>
<div class="swiper-slide" ><img src="images/image-3.jpg" alt="resim-3"></div>
<div class="swiper-slide" ><img src="images/image-4.jpg" alt="resim-4"></div>
<div class="swiper-slide" ><img src="images/image-5.jpg" alt="resim-5"></div>
<div class="swiper-slide" ><img src="images/image-6.jpg" alt="resim-6"></div>
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
<div data-role="footer" class="footer">
<h4>Button</h4>
</div>
</div>
You can use location.reload() with location = location as a fallback for older browsers to reload the page with Javascript.
<button id="reload" onClick="refresh()">Reload</button>
<script>
function refresh(){
location.reload() ? location.reload(): location = location;
}
</script>
As a result of my researches I have found a solution like this:
I divided my jquery mobile website in different pages. So multiple page website. And created an external js file for swiper slider. I put the .js link on end of body tag which page includes swiper slider codes in it. Every thing is okay now. It works very well. Before this editing all of the page codes were in same file. Because of this swiper slider did not work correctly. Now i don't need to refresh the page.
i am trying to create a responsive image that when to click on it another image opens and when you click on the new picture it goes away... disappears.
thanks !!
this is my code:
<div class="item">
<div id="img1"><"https://www.istockphoto.com/il/photos/lion-cub?excludenudity=true&sort=mostpopular&mediatype=photography&phrase=lion%20cub" /></div>
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick=diffImage(this) />
<img src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.display='none';"/>
</div>
The below code works in a similar approach to yours.
I have used the visibility CSS property instead of display and added the correct javascript into the onclick event of the first image
<div class="item">
<div class="artical1"></div>
<img src="http://www.interload.co.il/upload/5439335.jpg" id="image1" onclick="document.getElementById('other-image').style.visibility='visible'" />
<img id="other-image" src="http://www.interload.co.il/upload/9659133.jpg" onclick="this.style.visibility='hidden';"/>
</div>
I would recommend looking in to javascript in more detail to be able to do this in a more reproducible way.
I use ratchet.js to slider many images.
But now I want to click an element 'a'/'button' trigger the 'slider' method . And I want to destory browser method when we drag/touch page to left .It will turn to next tab .
Only allow people to jump by clicking on the button.
The html code like this:
<div class="slider" id="slider">
<div class="slide-group">
<div class="slide">
<img width="100%" src="/mobile/images/guide/1.jpg">
</div>
<div class="slide" id="slide-2">
<img width="100%" src="/mobile/images/guide/2.jpg">
</div>
<div class="slide" id="slide-3">
<img width="100%" src="/mobile/images/guide/3.jpg">
</div>
<div class="slide" id="slide-4">
<img width="100%" src="/mobile/images/guide/4.jpg">
</div>
</div>
</div>
I try to use code like this to solve this problem.
document.body.addEventListener('slide', function (e) {
e.preventDefault();
return false;
});
but it does not work ...
how to solve this problem ~~
Here is slider source code:
https://github.com/twbs/ratchet/blob/master/js/sliders.js
It looks the code is tied directly to touch events (touchstart/move/end), and it does not provide functions for manually controlling the slides.
This means it would be very difficult do what you want with Ratchet's built-in slider, so it is best if you use something else for the slider.
I just solved this problem by ratchet like this ..
<div class="guide-content" id="guide">
<div class="guide-tab active" id="slide-1">
<img width="100%" src="/mobile/images/guide/1.jpg">
</div>
<div class="guide-tab" id="slide-2">
<img width="100%" src="/mobile/images/guide/2.jpg">
</div>
<div class="guide-tab" id="slide-3">
<img width="100%" src="/mobile/images/guide/3.jpg">
</div>
<div class="guide-tab" id="slide-4">
<img width="100%" src="/mobile/images/guide/4.jpg">
</div>
</div>
Then I used
window.location.href = "#slide-3";
Just like "../guide#slide-3" to show the next page/tab , and are not allowed to switch pages sliding by slide .
In fact, you can only use tabs to achieve this effect without ratchet.js .
Here is my JsFiddle
I am trying to create an image gallery. I want my each image to open up inside a modal window when someone click on any image. I have designed my modal window. i just don't know how to connect my modal window to my images in the image gallery. I want the clicked-in image to appear inside the img tag of my modal window.
This is my first time i am trying to do something with modal window. i have no idea how to write that click event handler for my case. I searched in net. I did not find any matching solution. All were suggesting to use their own plugins. I don't want to use others plugins for this. A little help would be appreciated.
Here's is my image gallery
<div class="gallery">
<div class="row">
<img class="normalimage" src="">
<img class="wideimage" src="">
<!--more images-->
</div>
<div class="row">
<img class="normalimage" src="">
<img class="normalimage" src="">
<!--more images-->
</div>
</div>
Here is my modal window
<div class="gallery-overlay" style="display: none;">
<div class="gallery-imagebox">
<img class="gallery-image" src="#">
</div>
<div class="gallery-captionbox">
<div class="gallery-control gallery-control-previous">
<
</div>
<div class="gallery-control gallery-control-next">
>
</div>
</div>
</div>
Using jQuery you could start with this:
$(function(){
$('.gallery').on('click','a',function(){
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',$(this).find('img').attr('src'));
return false;
});
});
Have a look at this this fiddle