AJAX Blocks Image Slider from Working - javascript

I am working a menu bar on a webpage. the menubar is based on an image library called Jcoverflip(<=You will find a demo here). The Image Slider works perfectly. That is until I start trying loading in content from different HTML's using AJAX technique.
When I flip a logo displayed in the top of the above image. Then it indeed does load the content from the other HTML's AJAX style. However the Jcoverflip slider does not work anymore.
Main.html
<div id="mycontainer">
<div id=w rapper>
<ul id="flip">
<li>
<img href="home" src="Logo.png" />
</li>
<li>
<img href="product" src="Product.png" />
</li>
</ul>
</div>
</div>
<div id="content"></div>
product.html
<img id="contact1" src="Contact.png">
MainMenu.js
jQuery( document ).ready( function(){
$("#content").load("home.html");
$("ul#flip li img").click(function(){
var page = $(this).attr("href");
$("#content").load(page + ".html");
return false;
});
});
when you click the product logo in the slider then the img of prouct.html will indeed load as intended but the slider does not slide to the product logo. the slider is now frozen.
here is a fiddle for more code. https://jsfiddle.net/qvgadgv4/
the fiddle doesn't work since you need Jcoverflip.
Is there anyone who can help me understand why using AJAX blocks my image slider from working? And come up with a solution to make it work with AJAX.

Well i still don't know why this Ajax method blocks my slider from working but I by chance found a solution.
You should ID your img instead of href.
<div id="mycontainer">
<div id= wrapper>
<ul id="flip">
<li><img id="home" src="Logo.png" /></li>
<li><img id="product" src="Product.png" /></li>
</ul>
</div>
Then load the content like this instead
$("#home, #product, #submit2").click(function(){
if(this.id == "home"){
$("#content").load("home.html");
}
if(this.id == "product"){
$("#content").load("product.html");
}
});
This will load the content into the div of the main html and the slider will work at the same time.

Related

animate a logo for 3 seconds in the front page and then show an image slider

I am trying to get an animation from the logo to the image slider without leaving the page or reloading I like to know the best way with jquery to achieve this, I'm learning web-development any help would be great thank you
<div class="intro">
<img scr="logo.png">
<h3> website title</h3>
</div>
<div class="slides">
<ul>
<li>
<img scr="img.jpg" />
</li>
</ul>
</div>
<script>
$(function(){ $('.intro').hide.show(3000);});
</script>
Here's a FIDDLE.
$(function() {
$('.intro').delay(5000).fadeOut(600, function() {
$('.slides').fadeIn(600);
});
});
Try $('.intro').hide().delay(3000).show();
Haven't tested this, but make sure you have parens after your function calls (e.g. .hide() not .hide.
Also using delay(3000) to delay the showing for 3s instead of fading in for 3s.
One more tip: try using CSS to hide the .intro block:
.intro {
display: none;
}
To show the slider, just do the same with .slide:
$('.slide').show();

Constantly update a div's content to another div

I have a div (.bx-caption) in which the text changes based on the title attribute of a selected image in a slider.
I'm trying to copy the text from this div to another div, and always have them be matching.
I'm using:
$(document).ready(function(){
$('.screenTitle').html($(".bx-caption").html());
});
This code works to match the text when the site loads, but whenever I change images in the slider and .bx-caption switches to a new title, .screenTitle doesn't pick up on it and stays the same.
What can I do to ensure that .screenTitle always matches .bx-caption?
Thanks in advance to anyone who helps out.
Update: the HTML looks like this:
<ul class="bxslider">
<li><img src="images/1.png" title="Funky Roots" /></li>
<li><img src="images/2.png" title="Little Toots" /></li>
<li><img src="images/3.png" title="Epic Loots" /></li>
</ul>
</div>
<div class="outside">
<div class="screenTitle"></div>
<div id="slider-prev"></div> <div id="slider-next"></div>
</div>
Here is a JSFiddle trying to attempt the above:
jsfiddle.net/uwA3Q/2/
Document.ready fires only once when you load the page.
who ever changing the slider put your code over there
$('.screenTitle').html($(".bx-caption").html());
for example if you have a click handler that changes the slide
$('#mySlide').on('click', function(){
//do the changing of the slide
//also update the title here
$('.screenTitle').html($(".bx-caption").html());
})
If you are using bxslider add onSlideAfter callback to change screen title:
$('.bxslider').bxSlider({
// ......
onSlideAfter: function($slideElement) {
// get .bx-caption element of current slide
$('.screenTitle').html($slideElement.find('.bx-caption').html());
}
});
http://jsfiddle.net/DQadF/2/

Slideshow - link slide to URL only working for last slide

I'm using lean slider: http://dev7studios.com/lean-slider/
I want to link each slide to a different url. I've noticed that only the code in the last slide gets executed (and also applied to all other slides). For instance, adding an tag to google on just the last slide results in all slides linking to google. Somehow, it only sees the very last slide - if you inspect element on the slide, you'll see it always highlights the last slide's code.
EDIT: I've also noticed that it works fine when you don't include the sample-style.css file. But without this, there is no fade/transition effect and the navigation buttons are not formatted, so it would be pointless without this file, but the issue is probably with how the slider works.
Any ideas on what's causing this or how to fix it?
The only thing changed - added links to each slide. (index.html)
...
<div id="slider">
<div class="slide">
<a href="http://www.yahoo.com" ><img src="images/1.jpg" alt=""/></a>
</div>
<div class="slide2">
<a href="http://www.stackoverflow.com" ><img src="images/2.jpg" alt="" /></a>
</div>
<div class="slide3">
<a href="http://www.amazon.com" ><img src="images/3.jpg" alt="" /></a>
</div>
<div class="slide4">
<a href="http://www.google.com" ><img src="images/4.jpg" alt="" /></a>
</div>
</div>
...
I just figured it out. You should edit z-index property in these three places:
.lean-slider-slide.current {
z-index: 1;
}
#slider-direction-nav {
z-index: 2;
}
#slider-control-nav {
z-index: 2;
}
You can find it in slider.css and sample-style.css when you downloaded Lean Slider.
Have a look on this EXAMPLE, it works perfectly even with external resources.
Things that you need to make sure you have:
1.Include jQuery library (jQuery MUST be included BEFORE lean-slider.js)
2.Include the lean-slider.js
3.Include the lean-slider.css
4.Make sure you have an auto_increment class on your images (slider1 , slider2, slider3, etc)
Below all these (not before) add this:
$(document).ready(function() {
$('#slider').leanSlider();
});
And make sure the div that contains your images has an ID id="slider"
Always take the last link; play with the css you can force the position of elements and enable the link for each image:
/*lean slider css overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

lazy loading is not working properly

i want to display number of images in one page. For the best viewing i integrate lazy loading.
My javascript code is
<script src="{$this->scriptFolder}jquery.lazyload.js"></script>
<script src="{$this->scriptFolder}lazy_loader.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".lazy").lazyload({
effect : "fadeIn"
});
$(window).scrollTop(1);
});
</script>
My html code is like this
<ul>
<li class="span2" id="hider">
<a href="/Magazine/index/get/52/" class="thumbnail magazine_cover">
<img width="180" height="230" class="lazy" alt="cover" src="/public/demo.jpg" data-original="http://magsonwink.com/ECMedia/MagazineFiles/MAGAZINE-141/ISSUE-10085/CoverPage/Thumbnail/Outlook.jpg">
</a>
</li>
</ul>
but when i load this page the images are loading from different sections. I want to load images one by on
My staging site : http://staging.delhipress.thewinkstore.com/
if any one know about this please help me

Show section that was last visible using jquery or javascript

Trying to create some next and previous functionality here. Navigating through different HTML5 sections using hide and show, is it possible, for my back button, to find whichever div was last visible and show it?
This is my relevant html
<div id="next"><img src="img/next.png" alt="" onclick="nextPage()"></div>
<section id="splash">
<br><br><br>
<center>
<img src="img/home.jpg" alt="">
</center>
</section>
<section id="home">
<br><br><br><br><br>
<center>
<ul id="nav">
<li><img src="img/feat_btn.png" alt="" onclick="nextPage('feat-home')"></li>
<li><img src="img/models_btn.png" alt="" onclick="nextPage('model-lineup')"></li>
<li><img src="img/quiz_btn.png" alt="" onclick="nextPage('quiz')"></li>
</ul>
</center>
</section>
<section id="feat-home">feat home</section>
<section id="feat-e-menu">e menu</section>
<section id="feat-g-menu">g menu</section>
<section id="feat-i-menu">i menu</section>
<section id="model-lineup">lineup</section>
<section id="model-YWFE540H0A">model</section>
<section id="quiz">quiz</section>
relevant js
function nextPage(link) {
var vis = $("section:visible");
var next = vis.next();
if (link) {
var link = "#" + link;
vis.hide();
$(link).show();
} else {
vis.hide();
next.show();
}
}
So, the next button will take you through the flow off the app, but you are also able to press buttons to get to where you want to go, which is why I cant just have the back button show the prev section and hide the current one.
Any ideas?
On click, you will need to store what is currently being shown in a separate variable and use that for your previous button clicks.
When previous button is clicked show what is in the "previously shown" variable.
You will need to disable the previous button when it's a fresh page load.
This really does look a lot like some of the content slider plugins that are out there.

Categories