i tried to make pop up images in my responsive gallery, but it seems to me that highslide.js doesn't see the pop up images. Script source http://highslide.com/#installation I use bootstrap and Word Press. I see that images loading but can't appear. I spend much time but don't understand what I've done wrong. Any help will be greatly appreciated!
My site http://b.pusku.com/
<div class="container-fluid">
<div class="row-fluid">
<div class="span12 thumbs_color">
<ul id="thumbs">
<li>
<a href="http://b.pusku.com/wp-content/uploads/2012/11/7.jpg" class="highslide" onclick="return hs.expand(this)">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
<li>
<a href="/">
<img src="http://b.pusku.com/wp-content/uploads/2012/11/test_carusel1.jpg" alt="test_carusel" />
</a>
</li>
</ul>
</div>
</div>
</div>
<script src="<?php bloginfo('template_url');?>/highslide/highslide.js"></script>
<script type="text/javascript">
// override Highslide settings here
// instead of editing the highslide.js file
hs.graphicsDir = '/highslide/graphics/';
</script>
It may be that the hs.graphicsDir setting is wrong. Judging from the way you are inserting the template url in the path for the highslide.js file, my guess is that it should look like this:
hs.graphicsDir = '<?php bloginfo('template_url');?>/highslide/graphics/';
If that doesn't work, there's a FAQ item for it on the Highslide website.
Related
how can i create moving div like on this site (on right side of slider) Click to see div on web with javascript or jquery ?
The vertical carousel on this page (http://jquery.malsup.com/cycle2/demo/carousel.php) might help you out.
You can Google for jQuery carousel and you will find a lot of further tutorials and downloads for this.
<div class="slideshow vertical"
data-cycle-fx=carousel
data-cycle-timeout=0
data-cycle-next="#next3"
data-cycle-prev="#prev3"
data-cycle-pager="#pager3"
data-cycle-carousel-visible=2
data-cycle-carousel-vertical=true
>
<img src="http://malsup.github.io/images/beach1.jpg">
<img src="http://malsup.github.io/images/beach2.jpg">
...
<img src="http://malsup.github.io/images/beach9.jpg">
</div>
<div class=center>
<a href=# id=prev3><< Prev </a>
<a href=# id=next3> Next >> </a>
</div>
<div class="cycle-pager" id=pager3></div>
I'm currently trying to implement a dropdown containing months of the year, where the user clicking on a month will load the appropriate range of gallery images via .load().
The AJAX call itself works, but I'm unable to get my plugins to re-initialize on the callback, i.e. the scrollbar does not load.
What adds to my confusion is that the scrollbar will load on the callback ONLY IF I don't use the plugin previously in my main.js .
I'm using the mCustomScrollbar plugin.
Here's the HTML:
<!-- Release Calendar Month Dropdown -->
<div id="dropdown-release">
<ul>
<li>
Month
<ul>
<li id="nov14">November 2014</li>
<li>December 2014</li>
<li>January 2015</li>
<li>February 2015</li>
</ul>
</li>
</ul>
</div>
<div class="gallery"> <!-- ---------- GALLERY BEGINS ------------ -->
<div class="hidden" id="gallery-note">
<p><strong>Note:</strong> Tap gallery items to open<br/>in new tab</p>
</div>
<div class="gallery-img">
<a href="http://www.sneakersnstuff.com/en/product/16752/sneakersnstuff-reebok-inferno-15-stars" target="_blank">
<img class="lazy" src="img/loader.gif" delayedsrc="http://pngsneakerstuff.cachefly.net/images/105882/premium_full.jpg" />
</a>
<p class="imgDescription">November 22nd</p>
<span class="hidden">20141122</span>
</div>
<div class="gallery-img">
<a href="http://sneakernews.com/2014/11/13/bait-x-brooks-chariot-centennial-release-date/" target="_blank">
<img class="lazy" src="img/loader.gif" delayedsrc="http://cdn.sneakernews.com/wp-content/uploads/2014/11/bait-brook-chariot-centennial-3.jpg" />
</a>
<p class="imgDescription">November 22nd</p>
<span class="hidden">20141122</span>
</div>
.........etc
And here my main.js:
// within $(document).ready...
var galleryScroll = $(window).load(function() {
$(".gallery").mCustomScrollbar({
axis: "x",
advanced: { autoExpandHorizontalScroll: true }
});
});
$('#nov14').click(function() {
$(".mCSB_container").load("releases/november/nov.html",function(response,status,xhr){
$(".gallery").mCustomScrollbar("update");
});
});
I've also unsuccessfully tried to solve the issue through .ajaxComplete as suggested here.
Been stuck on this last bit for ages, help would be greatly appreciated! :)
From the plugin site you linked:
update
Usage $(selector).mCustomScrollbar("update");
Which is probably what you want to call in your callback instead of setting the whole thing up again.
First things first, I'm building my website on Bootstrap 3, which has it's own image gallery element in it. What I basically want to achieve, is that when I have a couple of buttons and the gallery element on the same page, pressing some of the buttons changes the images in the gallery element.
Tried to Google it but couldn't find any solutions that would satisfy my needs. Here are a couple of screenshots. JSFiddle is a bit difficult thing to be offered here, since I can't really include the image gallery element from Bootstrap, and including just the buttons would be a waste.
This is what I got right now:
This requires some sort of a knowledge about Bootstrap and JS/jQuery, since I'm not able to provide any demo-site or fiddle for this. All working solutions deserve my thanks!
UPDATE:
Here is the source code for the image-gallery, what it looks like in the firebug inspector. This should be of use for someone, since this still goes unsolved.
I think you are looking for this: http://isotope.metafizzy.co/
You need to use this markup for your gallery. You need to wrap the images, that each button should show in one div container
<a href="#" id="btn1" class="btn" >Button 1</a>
<a href="#" id="btn2" class="btn" >Button 2</a>
<a href="#" id="btn3" class="btn" >Button 3</a>
<div class="gallery">
<div id="cat1" class="cat">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
<img src="//placehold.it/50x50">
</div>
<div id="cat2" class="cat" style="display:none;">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
<img src="//placehold.it/50x50/ffff00">
</div>
<div id="cat3" class="cat" style="display:none;">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
<img src="//placehold.it/50x50/00ff00">
</div>
</div>
And add this Jquery code to the end of the page
function show(id)
{
$('.cat').hide();
$('#cat'+id).css('display','block');
}
$('#btn1').click(function(){show('1')});
$('#btn2').click(function(){show('2')});
$('#btn3').click(function(){show('3')});
I have a site that has a long form. There are some other parts to the site that need to change without resetting that form. I was planning on using an iframe to load the other parts of the page.
A sidebar on the page works as navigation. I would like the links in the sidebar to change the urls that the iframes point to, and change the actual url bar. But not reset/reload any of the other iframes.
Thanks
P.S: I am a complete newbie at JavaScript so full examples would help.
here is some of my code:
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to point to a user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="edit-iframe-1" id="username">This will change iframe 1 to have a different user</a>
<a onclick="edit-iframe-2" id="username">This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
The idea is that the list in the sidebar has all the different usernames, and whichever username you click on, it will load the corresponding page. The only part of the url that needs to change is the part after ?user=
Here is a simple solution that uses jQuery to pull the href from the clicked link and insert it into the target iframe's src attribute.
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id="sidebar-list">
<li class="list">
Mike - Frame 1
Mike - Frame 2
</li>
<li class=list>
Joe - Frame 1
Joe - Frame 2
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id=iframe1 src="/path/file?user=username"></iframe>
</div>
<div id=iframediv2>
<iframe id=iframe2 src="/path/differentfile?user=username"></iframe>
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".sidebar a").click(function(event) {
event.preventDefault();
var targetID = $(this).attr("data-target");
$("#" + targetID).attr("src", $(this).attr("href"));
});
});
</script>
You might try playing around with history.pushState. Unfortunately browser support is going to be limited to newer versions.
This answer should give you an idea what you're up against: Modify the URL without reloading the page
I think you should use javascript for your purpose. I think this could be a solution.
<SCRIPT LANGUAGE="JavaScript">
function newLocation1(nwloc){
document.getElementById('iframe1').src = "/path/file?user="+nwloc;
}
function newLocation2(nwloc){
document.getElementById('iframe2').src = "/path/differentfile?user="+nwloc;
}
</script>
<div class="sidebar">
<input type="text" placeholder="search for accounts" id="search" />
<ul id=sidebar-list>
<li class=list>
<a onclick="javascript:newLocation1('username1')" >This will change iframe 1 to point to a user</a>
<a onclick="javascript:newLocation2('username1')" >This will change iframe 2 to point to a user</a>
</li>
<li class=list>
<a onclick="javascript:newLocation1('username2')" >This will change iframe 1 to have a different user</a>
<a onclick="javascript:newLocation2('username2')" >This will change iframe 2 to have a different user</a>
</li>
</ul>
</div>
<div id=iframediv1>
<iframe id="iframe1" src="/path/file?user=username1"></iframe>
</div>
<div id=iframediv2>
<iframe id="iframe2" src="/path/differentfile?user=username1"></iframe>
</div>
I'm asking for some orientation and recommendations for developing something similar like the yahoo movies page: http://movies.yahoo.com/
I don't know how the thing at the top with the arrows and different title of movies is called but I've seen it several times.(the one that has 4 options:expendables, yogi bear, etc) I want to add something like this so I'm asking for orientation on what to look for and develop it on java script.
thanks!
Yes, that's what's called a Carousel, and there are many libraries and plugins for doing it. You might try Yahoo's own YUI Carousel Control or this one for jQuery, but there are plenty of others out there--just Google for them.
It's basically four links and four images here. When you click on the link, the associated image will be shown.
I will show you an example.
HTML:
<div class="links">
<a class="link-first" href="#">Show image 1</a>
<a class="link-second" href="#">Show image 2</a>
</div>
<div class="images">
<img class="image-first" href="#" alt="" />
<img class="image-second" href="#" alt="" />
</div>
JavaScript (jQuery):
$(".links a").click(function()
{
$(".images img").hide();
$(".images ." + this.className.split("-")[1]).show();
});