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.
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'd like to implement a fade-in/fade-out text only carousel like on the header of this website.
I looked at the code and it seems that it was done with bootstrap.
Since I don't really want to implement the whole bootstrap thing only for this, is there a way to do something similar with a few lines of CSS and Javascript (Im a total newbie in JS)?
Many thanks for your help
HTML of the website I took as example:
<div id="carousel_fade_intro" class="carousel slide">
<div class="carousel-inner">
<div class="active item">
<h1>Multi-purpose template</h1>
</div>
<div class="item">
<h1>designed for portfolio, agency</h1>
</div>
<div class="item">
<h1>or landing page.</h1>
</div>
<div class="item">
<h1>It's easy to customize</h1>
</div>
<div class="item">
<h1>to fit any brand.</h1>
</div>
</div>
</div>
Look at jQuery's fadeIn and fadeOut methods.
http://api.jquery.com/fadein/
The example you linked toggles classes on each item in a loop and uses css transitions to control the fades.
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
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.
I'm trying to get the jQuery gallerific plugin working at http://justrecip.es/ViewRecipes.aspx?recipeid=S9ML32WQO3&act=view . The gallery is loaded correctly, but neither the thumb grid nor the navigation (next/previous image) buttons work. There are no script errors, but it seems this is a JavaScript problem of some sort.
Try this
<div class="gallery-content">
<!-- Move controls above slideshow -->
<div id="controls" class="controls"></div>
<div class="slideshow-container">
<div id="loading" class="loader"></div>
<div id="slideshow" class="slideshow"></div>
</div>
<div id="caption" class="caption-container">
<div class="photo-index"></div>
</div>
</div>
jsFiddle example