I really like this slider sample HERE!. But I want to do is assign next/previous onclick command on images display on right side like this:
Instead of clicking those DOTS. I want to assign the onclick EVENT on images(RED BOXES).
How can I tweak that one.
Thank you in advance!
I've simply changed the $navDots variable to point to the images on line 90 of js.
var navDots = $('.nav-images');
this.$navDots = navDots.children( 'img' );
Then use this HTML:
<div class="nav-images">
<img src="http://lorempixel.com/400/200/city" alt="img01" width="100px"/>
<img src="http://lorempixel.com/400/200/business" alt="img02" width="100px"/>
<img src="http://lorempixel.com/400/200/technics" alt="img03" width="100px"/>
<img src="http://lorempixel.com/400/200/people" alt="img04" width="100px"/>
<img src="http://lorempixel.com/400/200/nature" alt="img05" width="100px"/>
<img src="http://lorempixel.com/400/200/sports" width="100px"/>
</div>
Hope it helps! Please see codepen example as well!. http://codepen.io/anon/pen/corjw
Disclaimer
Please do link to the non-minified source of the plugin, so you can modify that file directly. Currently, the plugin handles all the elements inside the #cbp-fwslider area. It may not be advisable to hack from outside, which is what this solution is...
Solution
It looks like you can mimic this by hiding the dots (which is what the plugin uses by default) and using your two elements to trigger click events on the dots. The currently active dot is indicated by a cbp-fwcurrent, so something like $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent') would select the current dot. Use jQuery's next() and prev() calls check if the relevant dot exists, and then do a $el.trigger('click').
Code Outline (untested)
$('#fwdButton').click(function() {
var $dot = $('#cbp-fwslider .cbp-fwdots .cbp-fwcurrent'),
$nextDot = $dot.next();
if ($nextDot) {
$nextDot.trigger('click');
}
});
`
Related
i have this code https://jsfiddle.net/j8kLz6wm/1/
when i add another image it does not work
<img ondragstart="return false" id="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
and it nicely does what i need,
but i cannot get my head around how to have multiple images in this div which all can be moved freely.
i want to be able to make collages with multiple images.
thanks for any help
I've just gone with your codebase. I think the image url is wrong.
it working well with this url https://via.placeholder.com/150.
I think you have to check your image url.
You can use classname instead of id to handle this issue.
<div id="container">
<img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
<img ondragstart="return false" class="drag-img" src="http://www.patsoy.com/p/2015/09/geometric-patterns-f03phtdx.jpg" />
</div>
And add addEventListener to each items
var items = document.getElementsByClassName('drag-img');
for (let item of items) {
item.addEventListener(event_start, start_drag);
}
here is the codebase. https://jsfiddle.net/jsdev778/5myvsxzw/21
Hope this help you.
I'm working on a feature, in which images are being rendered from the servers. I was working on aligning the images but found that there is a lot of white space. This was the reason, due to loading of images with a broken link.
HTML :
<div class="image-result" *ngIf="Display('images')">
<div class="col-sm-3" *ngFor="let item of items$|async">
<a href="{{item.link}}">
<figure>
<img class="res-img" src="{{item.link}}" onerror="this.style.display='none'">
</figure>
</a>
</div>
</div>
I have used onerror="this.style.display='none'" to solve the problem, but leaves a lot of white space when images are being loaded from the server. Is there any solution for it like to remove img tag whenever a image with a broken link has been detected ? I have gone through stackoverflow before asking question, but I'm not able to solve this problem. It would be great if someone can help me out. Thanks! :)
Instead of onerror="this.style.display='none'" to hide an image, you can use onerror="this.parentNode.removeChild(this)" to remove the image tag altogether.
If you want to remove the entire column, in your specific case you can do the following.
var colEl = this.parentNode.parentNode.parentNode;
colEl.parentNode.removeChild(colEl);
Or, in your HTML:
onerror="this.parentNode.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode.parentNode)"
You should probably move that to some JavaScript function and attach your handler by saying
element.addEventListener('error', function() { /* ... */ });
References: parentNode, removeChild, addEventListener.
If you don't care about supporting Internet Explorer, you can also use remove instead of doing the parentNode.removeChild trickery. That would be particularly useful for reducing the code length in your onerror attribute, would you choose to use it, but I don't recommend that.
A more angular-way of doing this would be:
<img src="{{item.link}}" (error)="item.brokenImage=true">
So you would have:
<div class="col-sm-3" *ngFor="let item of items$|async">
<div *ngIf="!item.brokenImage">
<a href="{{item.link}}">
<figure>
<img class="res-img" [src]="item.link" (error)="item.brokenImage=true">
</figure>
</a>
</div>
</div>
You need to listen for the error event of the image element, and assign a boolean on whether the image loaded successfully or not. Then, depending on that value angular will either show the image with the div, or remove it from the DOM.
I am working on an image gallery with a zoom feature, but when I change images the zoom is not picking up the change. This is the first time I have ever used a jquery plugin so I am probably just needing a nudge in the right direction.
The problem is when I try to us the .swap() I am getting
TypeError: $easyzoom.swap is not a function
The API ref has this
.swap(standardSrc, zoomSrc)
Easily switch the standard and zoom image sources.
I am using EasyZoom http://i-like-robots.github.io/EasyZoom/
Code is pretty simple, zoom works on initial image, but when image swaps, zoom is still using original image. .swap() should take care of it, but for some (likely very simple) reason I can't get it to work.
HTML:
<div id="mview">
<div class="easyzoom easyzoom--overlay">
<a href="/media/test/IMG_20130403_084209_183.jpg" id="zoomsrc">
<img src="/media/test/sm_IMG_20130403_084209_183.jpg" width="349" id="zoomview" />
</a>
</div>
<!------>
<div id="imgbar">
<img src="/media/test/tn_IMG_20130403_084209_183.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091502_782.jpg" width="60" />
<img src="/media/test/tn_IMG_20130403_091511_640.jpg" width="60" /></div>
</div>
Javascript
$(document).ready(function() {
var $easyzoom = $('.easyzoom').easyZoom();
$("#imgbar img").click(function(e) {
var bigImg=this.src.replace("tn_","sm_");
var bigImgSrc=this.src.replace("tn_","");
$("#zoomview").attr("src",bigImg);
$("#zoomsrc").attr("href",bigImgSrc);
console.log($easyzoom.data('easyzoom'));
// $('.easyzoom').swap(bigImg,bigImgSrc); //tried this too
$easyzoom.swap(bigImg,bigImgSrc);
});
});
Thanks for your time looking at this
M
You're not accessing the EasyZoom API. Each instance is saved via jQuery's internal storage to the target element and can be accessed like so: $easyzoomElement.data("easyZoom")
I've updated your example code (http://jsfiddle.net/spidre409/6Z89g/) here: http://jsfiddle.net/6Z89g/2/
Plugin portfoliojs was my choice for creating a carousel-style portfolio. However, I have discovered that there is no zoom functionality built into the plug in. Due to relative complexity of the jquery code, I am at a loss how to manually add zoom (more precisely, fancybox) functionality to the gallery. The "lightbox=true" initialization option merely dims the other images in the gallery, but does not zoom the image of choice.
Ideally, I would like to add fancybox functionality to my gallery, e.g. my html would look like this:
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
However, the gallery in portfoliojs only works when is child element of ( with no level in between):
<div id="gallery">
<img src="someimage.jpg></img>
<img src="someimage2.jpg></img>
</div>
I have tried to wrap the <img>elements into <a> but it did not work.
Is there a way I could combine the functionality of two plugins ( portfoliojs and fancybox) without significant code rewriting? What would the alternative be?
This is what I would do.
Having an html like this :
<div id="gallery">
<img src="images/01.jpg" alt=""/>
<img src="images/02.jpg" alt=""/>
</div>
where src attribute points to the image to be shown in fancybox, use this code :
var images = [];
$("#gallery").find("img").each(function(i){
images[i] = $(this).attr("src");
$(this).bind("click", function(){
$.fancybox(images,{
index: i
});
})
});
See JSFIDDLE
NOTE: You could use .on() (preferred) instead of .bind() :
$(this).on("click", function(){ ...
it requires jQuery 1.7+ though. See updated JSFIDDLE
I would like to know the best way to add a next and back button to click through my images. The images currently scroll left & right when you roll over a hotspot.
I have tried adding anchors to images, which works but is a bit messy.
Here is my code:
<div class="scrollWrapper" >
<div class="scrollableArea" >
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
<div class="boxer">
<img src="img/apples" />
</div>
</div>
</div>
Easiest way is to use a plugin to handle your slideshow, I like Malsup's cycle plugin, here's an example of what you're trying to do: http://jquery.malsup.com/cycle/int2.html
Instead of using a plugin, read this: http://blog.wearelaunchbox.com/?p=1029
This is great tutorial on how to make your own slider that you're talking about with very little jQuery. Let me know if this helps.
EDIT: Here is a jsfiddle running the right function how you want it, reworked from the tutorial.. You can take this code and rewrite the same function to make it go the other way.
http://jsfiddle.net/Ug3fu/3/