Jquery Rondell Multiple Images Not Working - javascript

I'm using Jquery Rondell plugin for thumbnail carousel as following:
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png" title="...">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
<script type="text/javascript">
$(function () {
$("#rondellCarousel").rondell({
preset: "carousel"
});
});
</script>
The result shows only one image correctly. However, when adding multiple sources as following
<div id="rondellCarousel">
<a target="_blank" rel="rondell" href="image/US.png">
<img src="image/US.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
<a target="_blank" rel="rondell" href="image/US2.png">
<img src="image/US2.png" alt="Band" title="Click to enlarge">
<h5>Awesome concert</h5>
<p>My favourite band.</p>
</a>
</div>
The second image is not shown in the navigation carousel and instead, when I click on the only image shown in the navigation carousel two images are shown in the appearing lightbox.

Ok, this is weird. after some trial and error, I found that there is a problem with the Git version. I have downloaded the library again from a different source (their own website) and it worked!

#fareed I'm the developer of the plugin. Could you tell me which version you used initially and which one you use now?
You can find the information at the top of the js file.

Related

Javascript change image on mouse hover not working

I have an html code as shown below. So far it is able to display the intended image. I also tried to change the src attribute and works completely fine.
<article id="memory-game">
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>
Now I have this script tag at the bottom of my element. It is supposed to change the image of the above html code from png to gif upon mouse hover on the specified article id. Last time I used this code was about 3 months ago, and it doesn't seem to work now.
<script>
$(function() {
$("#memory-game").hover(
function() {$(this).attr("src", "../../images/memory-game.gif");},
function() {$(this).attr("src", "../../images/memory-game.png");}
);
});
</script>
I'm a javascript noob. Anybody could help me solve the png-to-gif-change-on-mouse-hover issue? Would be greatly appreciated.
You have 2 elements using the same id. The id should be unique per document. jQuery is matching the first id so setting the src attribute on the div doesn't have any impact.
Remove the id from the article as follow
<article>
<a class="image"><img src="../../images/memory-game.png" id="memory-game" alt="" /></a>
<h3 class="major">MEMORY GAME</h3>
<p>Tkinter<br><br>A card-matching memory game implemented in Tkinter GUI;</p>
Confidential Source Code
</article>

Modal with sliding effect

I have been trying to get modal with sliding effect and zoom in when hovering over but no luck as yet, But I managed to get to a point that picture pops up when clicking on it. This is a similar site http://www.garysheng.com/(Photo section). Please see the Codepen https://codepen.io/rranssa/pen/LYVyooe.
You can use lightGallery
It is simple and you don't have to implement it by yourself,
all you need to do is to add mentioned link in documentation and then use it like below:
<div id="lightgallery">
<a href="img/img1.jpg">
<img src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg">
<img src="img/thumb2.jpg" />
</a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
You can enable and disable options by passing an object to it like this:
$('#lightgallery').lightGallery({
mode: 'lg-fade',
cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)'
......
});
all options are available in link below:
https://sachinchoolur.github.io/lightGallery/docs/api.html

Angular UI Bootstrap Popover w/HTML not functioning

I have the snippet below in my HTML:
<a ng-href="#" popover popover-template="views/popovers/cu.html" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="40">
</a>
Clicking the a tag does not trigger the popover. Popover's in my application work without HTML, but not with.
I've essentially copied the "Popover with Template" section from the docs here: https://angular-ui.github.io/bootstrap/#/popover
But it still does not function as it does in the example above.
What's wrong?
Try this: Assuming that you're not using the script tag, and you're using a separate html file, add an extra single quote in your popover-template. See my example on plunkr. So that should be popover-template="'cu.html'" instead of popover-template="cu.html".
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top" >
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
Edit: Another way to achieve this is using the script tag and having 'text/ng-template' as the type. The id would be the text that you place inside the popover-template. Take a look at this version on plunkr.
So I would look this:
<a ng-href="#" popover-template="'cu.html'" popover-trigger="click" popover-placement="top">
<img ng-src="{{chat.avatar}}" width="50" height="50">
</a>
<script type="text/ng-template" id="cu.html">
<div>
Hey there!
</div>
</script>

addthis.toolbox() method: buttons cut off and alt text displaying

As I'm doing some jQuery html replacement on a responsive design, it was suggested that I use the addthis.toolbox method instead of the init method from AddThis.
Even though my code is specifying the 32x32 pixel buttons they're getting displayed with the bottom half of the graphic cut off and the alt text displaying. Here's the code:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="example"></a>
<a class="addthis_button_twitter_follow" addthis:userid="example"></a>
<a class="addthis_button_google_follow" addthis:userid="xx"></a>
<a class="addthis_button_youtube_follow" addthis:userid="example"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=example&async=1">
</script>
<script type="text/javascript">
addthis.toolbox("#zazoo");
</script>
I even made a stripped down version that's just the code and still see the issue with the cut off buttons. For the AddThis users out there...can you see a problem with the code or is a system issue on AddThis' end? I can't see any issue with the code itself, just the way it's getting displayed.
The addthis.toolbox() method only works after you've called the addthis.init() method if you're using the async flag. Change your code to this:
<div id="zazoo" class="addthis_toolbox addthis_default_style addthis_32x32_style">
<a class="addthis_button_facebook_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_twitter_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_google_follow" addthis:userid="108569913685983365364"></a>
<a class="addthis_button_youtube_follow" addthis:userid="digitalhit"></a>
<a class="addthis_button_rss_follow" addthis:userid="http://feeds.feedburner.com/DigitalHitEntertainmentNews"></a>
</div>
<script src="//s7.addthis.com/js/300/addthis_widget.js#pubid=dheian&async=1"></script>
<script type="text/javascript">
<!--
addthis.init();
// -->
</script>
The addthis.toolbox() method is only used to render the buttons after the first initialization.

problem with using javascript to load Quicktime into div from link

I have a left <div> (id = 'videopane') and a right <div> containing a clickable list of items.
I am trying program this: You click on one of the items in the right <div>, it loads the Quicktime movie into the left <div>.
I am using the JQuery media plugin to generate all of the embed code. and it works if I simply input the code <a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a> into the left <div>.
It does not work when I try to apply this code to one of the items in the list in the right <div>, although the code seems fine to me:
<a href="#" onclick="document.getElementById('videopane').innerHTML='<a class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov"></a>'">
Any insight into what I am doing wrong?
The jQuery plugin you are using is taking the movie source from the href of the link. So you would do it link this.
<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />
This will generate when clicked.
<div class="media">
<object codebase="http://www.apple.com/qtactivex/qtplugin.cab"
classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B">
<param name="src" value="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov">
<embed src="sample.mov"
pluginspage="http://www.apple.com/quicktime/download/"></embed>
</object>
<div>My Quicktime Movie</div>
</div>
Make sure to add this after you include jQuery and the plugin.
$('.media').media();
html that is generated on the fly will not work, right away,
make sure that when you add the anchor tag to run the plug in function:
<a href="#" id='rihana' >Rihana</a>
Javascript
var movie = document.getElementById('rihana');
movie.onclick = function () {
document.getElementById('videopane').innerHTML= '<a title="movie title" class="media" href="anthony-mandler/music-video/Rihanna_Only_Girl_Web.mov" />'
// then run the plugin function.
$('.media').media();

Categories

Resources