Reorder image gallery - javascript

I have an unordered list of image thumbnails. Each thumbnail links to the full size image.
I use the YUI3 library to allow drag & drop reordering of the thumbnail images (just the out-of-the-box example code).
The problem is the link to the fullsize image: it is not draggable. Only the small portions underneath the thumbnail (with title and value) are draggable.
<ul>
<li class="imgcontainer">
<div>
<a href="/image.jpg">
<img src="thumbnail.jpg" border="0" alt="" />
</a>
</div>
<div class="left">Title</div>
<div class="right">$2.00</div>
<div class="clear"></div>
</li>
<!-- ... -->
</ul>
What is the best way to allow users to reorder the images in such an image gallery?
Add a drag handle icons to a corner of the list items?
Create a "reorder mode" in which the link anchors are removed, leaving only draggable images?
Or can it be set up so that the links still can be dragged?

Your problem is that the anchor tag is not a valid drag handle per default. You can change this by using removeInvalid('a') on your drag instance.
var dd1 = new Y.DD.Drag({
node: '#drag1'
});
dd1.removeInvalid('a');
Another option would be to remove the anchor tag
<div class="linked-image">
<img src="http://placekitten.com/50/50" border="0" alt="" />
</div>
and add a click listener to the image.
Y.on('click', function () {
alert('go to url');
}, '.linked-image');
Both approaches are demonstrated here: http://jsfiddle.net/xGQne/
Note that the click event fires after the drag is completed in both cases. You will need to differentiate between clicks and drags to make this work smoothly.

Related

how to change the color of a div element when an image is dragged onto it?

I am uploading an image using an input tag and fileReader.
I have made the image draggable using drag and drop API of angular material. Also, there are 2 divs.
The following code shows it.
<input type="file" (change)="fileChange($event)" placeholder="Upload file" >
<img id="blah" [src]="url" alt="your image" cdkDrag/>
<div class="box1">
hi
</div>
<div class="box2">
hi
</div>
<div class="box3">
hi
</div>
My requirement is that, when I drag the image into one of the div boxes, the color of the div should change. Right now I am able to drag the image into the div boxes but how do I change the color of the div when the image is dragged on to it.
From the code provided, I have the following idea.
Steps:
check which parent node is the related div by using document.querySelector('#blah').parentNode
assign the related DOM to a variable as follow:const divNeeded = document.querySelector('#blah').parentNode
Suppose you have some color defined in your css file, let say it is called relatedStyle, you can add it to divNeeded by using .classList.add('relatedStyle').
Example for the style in CSS file:
.relatedStyle{
background-color: blue
}

Dropdown Picture Menu

I was wondering how I could create a collapsable dropdown menu showing picture links for my website. Perhaps just simply displaying a dropdown symbol which both opens and collapses to show the site's navigation.
Hoping this is possible?
Add a button or image to the document that will serve as the main
list activation button.
Create a div element that contains a ul
element.
In the ul, create li elements that contain the images you
wish to use.
Wrap each image in an a element (to make them
clickable).
Use JQuery's slideToggle() method on the click event of
your button to show/hide the div.
Use jquery, set your links div as hidden then use jquery toggle() or slideToggle() to toggle the hidden div. Here is a fiddle example:
https://jsfiddle.net/edencorbin/x4sw2b6e/2/
HTML
<img src="http://placehold.it/50x50">
<div class="thediv" hidden="hidden">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
<img src="http://placehold.it/50x50">
</div>
Javascript
$(document).ready(function() {
$('#dropdownlink').click(function(e) {
e.preventDefault();
$('.thediv').slideToggle();
});
});

How to swap between two images with one separate hyperlink ONLY

Been trying to find a solution to this but usually all methods involve mouse-hovering or mouse-clicking on the image itself rather than a hyperlink to swap the two images - or having to click on 4 separate links to view 4 different images for example.
<div id="aboutus">
<a href="#>More about us...</a>
<img id="introimage" src="images/img1.jpg" style="display:block">
<img id="introimage" src="images/img2.png" style="display:none"/>
</div>
Simply put I would like the 'More About Us' link to swap the display for the images when clicked - or any other method that would let me swap the two images on each click.
As I said in the comments, you should change the IDs so they're unique or make them classes (as I have done in this example).
HTML
<div id="aboutus">
More about us...
<img class="introimage" src="images/img1.jpg" style="display:block">
<img class="introimage" src="images/img2.png" style="display:none"/>
</div>
Javascript
$(function() {
$("a.introimagetoggle").on("click", function(event) {
event.preventDefault();
$("img.introimage").toggle();
});
});
You could mess about checking which image is visible and then setting the display state of each of them according to that, but toggle is simple and will suit this particular instance.

javascript examples display content boxes

I am trying to locate javascript code that, when I rollover an image, will make a box appear below the image and expand down (much like how a movie screen in a theater would roll from the ceiling to the floor). In that box, content would also appear, that I have previously added, that describes the image above. Already existing underneath the image I have a div with content in it...I would also like this div to be pushed down as the box described above expands down.
Any suggestions?
Thank you very much in advance!
C*
Forgot the code that I am using...so what is happening here is that I have a picture, and below it, a small box, that when I rollover that small box it changes color. So, I want to add, when I scroll over that small box, not only does it still change color, but the new vertical expanding box appears below it. I have javascript in a *.js file that handles the already existing rollover effect but it's quite long and I wasn't sure if I should add that (it was create by Dreamweaver when I created a rollover image).
<div class="images">
<figure class="images">
<img src="../images/Flower2.jpg" width="300" height="199" alt="Life">
</figure>
<figcaption class="content"><a class="typeB" href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','../graphics/life2.jpg',4)"><img src="../graphics/life1.jpg" width="300" height="25" id="Image3" /></a>
</figcaption>
</div>
You don't give much information in your question about your current setup, but assuming that you have your HTML set out something like this:
<div>
<img id="tux" src="http://upload.wikimedia.org/wikipedia/commons/1/1c/Crystal_128_penguin.png" />
<div id="tux_desc" class="imgDesc" style="display: none">
<p>A cute penguin!</p>
</div>
</div>
<div>
<p>This text is part of the normal document flow</p>
</div>
Then you can use the following JavaScript (which makes use of jQuery):
$('#tux').hover(
function() {
$('#tux_desc').slideDown();
},
function() {
$('#tux_desc').slideUp();
});
You can see it working here: http://jsfiddle.net/wbAxm/1
something like this ought to to do it as long as the div to expand is directly after the image in the mark-up:
$(".class_for_images").on("mouseenter mouseleave", function() {
var content = $(this).next();
if (content.is(":visible")) {
content.slideUp();
} else {
content.slideDown();
}
});
If you want more than this, or it doesn't work, you'll need to post some code so that we can provide more detailed answers...

how to prevent fancybox from deleting the clicked thumbnail

Fist time using fancybox and it's not going so well.. starting to wish I didn't bother with it.
I have some thumbnails in a row, fine, then when I click one it opens the THUMBNAIL instead of the link whats worse it DELETES the thumbnail from the DOM. I've dug around in the fancybox src for the issue but there's a lot of it and I'll probably end up killing functionality so I thought I'd post here.
heres the code:
The raw HTML comes from CMS looking like:
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
I then run some stuff in backbone view render, the important bit is this:
var imgs = this.$el.find("img"); //:a jquery group of the img elements above
this.content = this.$el.find("span.postcontent");
//empty current
this.content.empty();
//make replacement
for(i= 0;i<imgs.length;i++)
{
var curImg = $(imgs[i]);
var curLink = $("<a/>");
curLink.attr("href",curImg.attr('data-orig'))
curLink.append(curImg);
curLink.on("click",function(e){
e.preventDefault();
$.fancybox.open(imgs)
});
this.content.append(curLink)
}
I now have rendered html like this:
<a href="http://blah..blah..flickr..big..001_b.jpg">
<img src="http://blah..blah..from..flickr..001_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..001_b.jpg">
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
So far so good... now, when I click the link/thumb it does the fancybox thinggy but shows the THUMBNAIL not the linked image, tiny in the middle in it's lightboxy thing and whats really annoying is that the clicked thumbnail in the page itself has now been completely removed from the dom ie.:
<a href="http://blah..blah..flickr..big..001_b.jpg">
///THIS IS MISSING COMPLETELY..... ggggggrrrrr
</a>
<a href="http://blah..blah..flickr..big..002_b.jpg">
<img src="http://blah..blah..from..flickr..002_s.jpg" alt="my image one" class="flickr-square" title="test image" longdesc="" data-url="http://blah..blah..flickr..detail..page" data-orig="http://blah..blah..flickr..big..002_b.jpg">
</a>
I've never seen Fancybox used like that. Normally, you don't need to trigger $.fancybox.open like that. You can just bind fancybox() to the <a> tags.
HTML:
<a href="big-image.jpg" class="fancybox">
<img src="thumbnail.jpg">
</a>
JavaScript:
$('.fancybox').fancybox();
Try just using that function after you've got the DOM to look like that.
[edit]
I couldn't get your DOM manipulation to quite work, but I tested with this fiddle, and it seems to be working: http://jsfiddle.net/haRnQ/4/
NOTE: I didn't import the styles or images for the demo, so it will be unstyled, but it still works.
I'm answering and voting up the previous two because they both helped but were not the definitive answer. The documentation was not clear that if you use only the "group" as a jquery array you must also specify options therefore the correnct answer is to do this (passing two arguments):
$.fancybox.open(imgs,
{
href:this.href,
title:curImg.attr("title")
}
);
Try changing this
$.fancybox.open(imgs)
by this
$.fancybox({
href: this.href
});
because imgs is the collection of your thumbnails (all <img> elements), which are moved to fancybox on click but not moved back after close.
In any case I would recommend you to add a class to <a> otherwise any other anchor you may have in your page would try to open fancybox.
I believe Fancybox prefers wrapping your images in an anchor. This is important to note as Fancybox removes the anchor when activating a slide show to prevent clicking on the anchor when the modal is active.
Calling FB from the thumb behaves like you have experienced by deleting the thumb and not recovering it after the modal is closed.
This is my typical FB setup (not a thumb gallery):
<img src="image1.jpg" alt="" />
<div style="display: none">
...
</div>

Categories