Develop Reference

jQuery: drag and drop folder slideshow for website

I'm creating a website for my organization that needs to have a slideshow for images. We do not often have quality access to internet, and the folks maintaining the site won't be highly knowledgeable in web design, so updating frequently is difficult. Therefor I am trying to generate an image slideshow that will pull images from a specific folder on the server.
http://www.codeproject.com/Tips/581747/jQuery-Slideshow-for-a-selected-folder?fid=1831110&select=4601478&fr=1
This appears to do just that, however I don't know fully what I'm doing. The guide says to place the HTML snippets in the head and body, that much is easy.
Next it states that a "simple sub" is to be created, and the following code is given...
Dim oDir As New DirectoryInfo(Server.MapPath("<relative path the images>"))
Dim fileList() As FileInfo = oDir.GetFiles("*.jpg")
Dim iFileCount As Integer = fileList.Count
iFileCount -= 1
Dim oImage As HtmlImage
For i As Integer = 0 To iFileCount
oImage = New HtmlImage
With oImage
.Src = String.Format("path\{0}", fileList(i))
If i = 0 Then .Attributes.Add("class", "active")
End With
slideshow.Controls.Add(oImage)
Next
I understand that "relative path the images" and "path" need to be updated with the name of the folder on my server... but I don't know what exactly to do with this code snippet. Does it get saved as a new .js file? I'm not seeing anything in the HTML that references another file.
Also... That guide uses a jquery API hosted on codeproject.com... I'm assuming its safe to sub it out for the same one hosted with google? I'd prefer not to rely on codeproject.com.

Steps to follow
1. Open your aspx/HTML page (your code sounds as if it's an aspx page)
2. With in the head/body paste the two javascript <script>...</script> tags codeproject has mentioned.
3. Do the same for the CSS which is within <style>...</style> tag
4. Drag and Drop an HTMLImage control to your webpage and name it slideshow
5. Your Sub needs to live on the page to populate the HTMLImage control with the images.
Important to check if your HTMLImage control is loaded with all the images. If you are using Chrome to test the website, hit F12 and look for your control under the tab called "elements". If the HTMLImage control contains all the server side images, the 1-3 steps mentioned above should be sufficient.
Hope that helps!

Please try the below mentioned code. Edit the tag at the bottom end of the code and add the link yo your image file within src="". This slideshow rotates every 7 due to accessibility reasons. You could change it to a different value in case you would like to do so. Please let me know if you are still having trouble fixing this!
`
<script src="http://code.jquery.com/jquery-1.10.2.min.js"
type="text/javascript"></script>
<script type="text/javascript">
/***
Simple jQuery Slideshow Script
Released by Jon Raasch (jonraasch.com) under FreeBSD license: free to use or modify,
not responsible for anything, etc. Please link out to me if you like it :)
***/
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ($active.length == 0)
$active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next() : $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({
opacity : 0.0
}).addClass('active').animate({
opacity : 1.0
}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval(function() {
console.log("fsdfsdf");
slideSwitch();
}, 7000);
});
</script>
<style type="text/css">
/*** set the width and height to match your images **/
#slideshow {
position: relative;
height: 350px;
width: 350px;
}
#slideshow IMG {
position: absolute;
top: 0;
left: 0;
z-index: 8;
opacity: 0.0;
height: 350px;
width: 350px;
}
#slideshow IMG.active {
z-index: 10;
opacity: 1.0;
}
#slideshow IMG.last-active {
z-index: 9;
}
</style>
</head>
<body>
<div id="slideshow">
<img src="http://www.tate.org.uk/art/images/work/D/D29/D29293_10.jpg" alt="Picture 1" class="active">
<img src="http://3.bp.blogspot.com/_ShpNcCZ0lVE/S_n3Xkv126I/AAAAAAAABbs/T0B8xwIg7Ko/s1600/IMG_7163.JPG" alt="Picture 2">
<img src="http://www.automotofoto.net/wp-content/uploads/2012/04/Honda-World-Superbike-Team-Heads-Home-for-Round-Three-THUMBNAIL-2.jpg" alt="Picture 3">
</div>
</body>
`

append and remove elements on upcount and downcount

I've a question on the jQuery UI Slider widget. What I intend to do is, that on every upcounting value the slider appends me an image in a div:
$("#divOne").slider({
range: "min",
min: 1,
max: 10,
slide: function (event, ui) {
console.log(ui.value);
if(ui.value == 1) {
$('#divOne').append('<img class="linkimg" src="img/link/zwei.png">');
}
if(ui.value == 2) {
$('#divOne').append('<img class="linkimg" src="img/link/drei.png">');
}
if(ui.value == 3) {
$('#divOne').append('<img class="linkimg" src="img/link/eins.png">');
}
},
change: function (event, ui) {
//alert('Stopped at ' + ui.value);
}
});
works good so far.
The problem is, I want to remove the elements if I'm then downcounting but then if I cross one number it of course appends again, so I guess compare the value in that if-statement is wrong.
Does anyone of you has a hint? Cheers
EDIT: I have made an image to show what I want to do CLICK

Assume placing all the images in html
/* cache collection of images*/
var $images= $("#divOne img")
$("#divOne").slider({
slide:function(e,ui){
if( ui.value !== $images.filter(':visible').length){
$images.hide().slice( 0, ui.value).show();
}
}
});
What this does is track number visible vs slider value.... if they don't match it hides all and shows the ones that match slider.
If you have a large number... this should be upgraded to track direction of slider and only modify affected images to improve performance

First change the image names to match the values. E.g., 1.png, 2.png. Then you can:
var i, maxVal = ui.value, html='';
for (i = 1; i <= maxVal; i += 1) {
html += '<img src="img/' + i + '.png';
}
$('#divOne').html(html);
EDIT: But in general a better approach is to have all images in the container and then construct a stylesheet that would map classes that match values to appropriate state. E.g.:
<div class="score[X]"> <!-- where `[X]` will be the actual value of the ui.value -->
<img class="val1" src="1.png">
<img class="val2" src="2.png">
<img class="val3" src="3.png">
</div>
In css:
.score1 .val2 { display: none; }
.score1 .val3 { display: none; }
....
Or some other variation of the above.
EDIT:
Example fiddle with a slightly different approach for CSS: http://jsfiddle.net/gwQAW/
EDIT2:
And version with HTML5 slider: http://jsfiddle.net/gwQAW/2/ (sorry, no time for jQuery UI right now)

Mootools slideshow adapting

I'm looking for a Mootools slideshow that changes main picture with a timer (normal slideshow function) and has a clickable thumbnail list. Because I have many other mootools features in the site I am working so the slideshow has to be mootools.
I found two options:
scrollgallery2.mashitup.de (which is a v.2 of this) - how to make it start the slideshow? (its stoped in the first picture)
github.com/jakobholmelund/SpinSlider (which Jakob adapted from a jQuery slideshow) - the .js file is missing the thumbs code. Any ideas how to merge/translate the jQuery idea to Mootools?(see under)
jQuery version:
if (options.bulletThumbs) {
var thumbName = slides.eq(i).data('thumb');
if (thumbName) {
var liMarkup = $('<li class="has-thumb">' + i + '</li>')
liMarkup.css({
"background": "url(" + options.bulletThumbLocation + thumbName + ") no-repeat"
});
}
}
orbitWrapper.children('ul.orbit-bullets').append(liMarkup);
liMarkup.data('index', i);
liMarkup.click(function () {
stopClock();
shift($(this).data('index'));
});
}
setActiveBullet();
}
Mootools adapted by Jakob Holmelund:
if(this.options.bullets){
this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
this.slides.each(function(slide, index){
new Element("li",{text:index+1}).addEvent("click", function(){
self._stopClock();
self._spin(index);
}).inject(self.bullets);
});
this._setActiveBullet();
}
Any suggestions how to fix one of this? or any other slideshow idea?

Here is new code I added on the .js of Jakobs file. Maybe good for a next version of that slideshow.
In the JS file: ( this adds the capacity to see if a img is in the slide and adds thumbnail to the <li> CSS background-image)
if(this.options.bullets){
this.bullets = new Element("ul").addClass("spin-bullets").inject(this.spinWrap);
this.slides.each(function(slide, index){
var stl = '';
if (!slide.hasChildNodes()) stl = 'background-image: url('+slide.getAttribute('src')+')';
else if (slide.getChildren('img').length > 0) stl = 'background-image: url('+slide.getChildren('img')[0].get('src')+')';
else if (slide.get('img')) stl = 'background-image: url('+slide.get('img').get('src')+')';
new Element("li",{text:index+1, style: stl, class: ((stl != '')?"spin-bullets-img":"")}).addEvent("click", function(){
self._stopClock();
self._spin(index);
}).inject(self.bullets);
});
this._setActiveBullet();
}
Then add in the CSS:
.spin-bullets li.spin-bullets-img {
width: 50px;
height: 25px;
background-position: center top;
background-size: 80px auto;
border:#CCC 4px solid;
}
.spin-bullets li.spin-bullets-img.active {
border:#88F 4px solid;
}

Instead of reinventing the wheel it may be easier to use something that already exists. I took a quick look in the MooTools forge (http://mootools.net/forge/browse?search=gallery) and found the following:
http://software.bmo-design.de/scrollgallery.html
I modified the very awesome http://www.electricprism.com/aeron/slideshow/ on this project awhile back: http://treecareenterprises.com/c/tree-care-photo-gallery/?showonly=5
Unfortunately I do not have time to extract the code today but feel free to take a look and see if you can grab the relevant tidbits. Also it looks like it is running on v1.2.4 you may want to upgrade it to 1.4 which is not as hard as it may seem see the following link for guidence: https://github.com/mootools/mootools-core/wiki/Upgrade-from-1.2-to-1.3-or-1.4

Apply Different Rules when clicking on Different Thumbnails (jquery)

I'm pretty much a newbie on the HTML/CSS realm and have been facing a jquery challenge ever since I started building my first website. I want to create an jquery-powered image gallery, using thumbnails. The tutorial I followed for that matter was Ivan Lazarevic's (http://workshop.rs/2010/07/create-image-gallery-in-4-lines-of-jquery/). I also made use of Stackoverflow's forum through this thread: http://goo.gl/ILzsx.
The code he provides replaces the large image on display with the larger version of the thumbnail that's been clicked. This seems to work pretty smoothly but just for pictures that have the same orientation. The following code appears on two different files, thus establishing a difference between the horizontal and vertical images:
<div id="mainImage">
<img id="largeImage" src="Images/Projects/UOW/UOWII_large.jpg"/>
</div>
AND:
<div id="mainImageVERTICAL">
<img id="largeImageVERTICAL" src="Images/Projects/UOW/UOWI_large.jpg" />
</div>
I have created different CSS rules for both the largeImage and largeImageVERTICAL parameters, depending on whether the image has a portrait or landscape orientation.
#largeImage {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 5%;
}
AND:
#largeImageVERTICAL {
position: fixed;
height: 83%;
width:auto;
top: 15%;
left: 36.36%;
}
These two rules just place the images at different points of the screen. However, what I would like to know is how to modify my code so that I can create a page with both portrait and landscape-oriented images applying the CSS rule that belongs to each. Up to now, what I have is what I got from Lazarevic's approach, which is:
$('#thumbs img').click(function(){
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});
This code just replaces the thumbnails with the bigger pictures. As stated, I want to be able to apply the right rule to the right image and I'm assuming this has to be be made through some JS coding, which I know pretty much nothing about.
I would appreciate some help so that I can keep on with this project. Any ideas how to make this work? Maybe a JS function that tells the machine to use one or another CSS rule depending on which image is clicked upon? I'm really stuck here...
Thanks in advance!

There are a couple of ways you could do this.
Use a HTML5 data-* attribute to specify which of the <img> elements should be updated. So:
<div id="thumbs">
<img src="img.jpg" data-large="largeImage"/>
<img src="anotherimg.jpg" data-large="largeImageVERTICAL"/>
</div>
Then:
$('#thumbs img').click(function(e) {
var imageId = $(this).attr('data-large'),
newSrc = this.src.replace('thumb', 'large');
$('#' + imageId).attr('src', newSrc);
});
Or, use the dimensions of the thumbnail to determine whether it's portrait or landscape:
$('#thumbs img').click(function(e) {
var $this = $(this),
height = $this.height(),
width = $this.width(),
newSrc = this.src.replace('thumb', 'large');
var imageId = (height > width) ? 'largeImageVERTICAL' : 'largeImage';
$('#' + imageId).attr('src', newSrc);
});
In either case, you'll probably need to hide the other, unused <img> element so that you don't have the previously selected image for the other orientation displayed.
One way to achieve this would be:
var alternateImageId = (imageId === 'largeImage') ? 'largeImageVERTICAL' : 'largeImage';
$('#' + alternateImageId).hide();
Add the above two lines to the click event handler above, and call .show() after calling .attr('src', ...).

Use class not id.
#largeImage{
top: 15%;
width:auto;
height: 83%;
position: fixed;
}
.portrait{
left: 36.36%;
}
.landscape{
left: 5%;
}
js
$('#largeImage').on('load', function () {
var that = $(this);
if (that.width() < that.height()) {
that.addClass('portrait');
} else {
that.addClass('landscape');
}
});
$('#thumbs').on('click', 'img', function () {
$('#largeImage').attr('src',$(this).attr('src').replace('thumb','large'));
});

Why the box disappear immediately?

I want the mouseover on the coverImg then show the coverInfo
the coverInfo show the title and the description of the image
then the coverInfo do show
but I want the coverInfo stay and clickable when mouserover on itself
but it disappear immediately.
So what's the point I have missed?
The HTML
<div class="workshop_img">
<div class="coverInfo"></div>
<a href="#">
<span class="coverImg" style="background-image:url('images/work/show1.jpg')" title="Chictopia "></span>
</a>
The CSS：
.coverInfo {
position:absolute;
width: 200px;
height:200px;
background:rgba(0,0,0,0.5);
top:30%;
left:30%;
display:none;
}
see the jQuery code
$(function() {
$(".coverImg").each(function() {
//make the background image move a little pixels
$(this).css({
'backgroundPosition' : "-40px 0"
}).mouseover(function() {
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
}, {
duration : 90
});
//shwo the info box
var content = $(this).attr("title");
$("<div class='coverInfo'></div>").text(content).prependTo($(this).parent()).fadeIn("fast");
}).mouseout(function() {
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
}, {
duration : 200,
});
$(this).parent().find(".coverInfo").stop().fadeOut("fast");
})
})
});
</div>
EDIT：
I have searched a lot and find something similar, I took them and the answer given below together to solve my problem, here is the code:
$(function() {
$(".coverImg").css({
'backgroundPosition' : "-40px 0"
}).mouseenter(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : " -20px -60px "
},90);
info.show();
}).mouseleave(function() {
var box = $(this).parents(".workshop_img").find(".coverInfo");
var content = $(this).attr("title");
var info = box.text(content);
$(this).stop().animate({
'backgroundPosition' : "-40px 0"
},200);
info.stop().hide();
});
});
It has just been clean, but do not work fine.
What's the problem?

The new box shows immediately because it is not initially marked as hidden. .fadeIn() only fades in something that is initially not showing.
You can make it initially not visible like this:
$("<div class='coverInfo'></div>").text(content).hide().prependTo($(this).parent()).fadeIn("fast");
You also can get rid of the .each() iterator you're using. You don't need it. You can just use:
$(".coverImg").css(...).mouseover(...).mouseout(...);
You don't need the .each() at all.
I'd also suggest you use .hover(fn1, fn2) instead of .mouseover(fn1) and .mouseout(fn2).
And, it looks like you are creating a new object and inserting it on every mouseover event such that multiple such objects will pile up in the page. You should either .remove() the object in the mouseout function or you should reuse a previously existing element if it exists in the element rather than creating more and more of them.
Sometimes when you are using the events for mouse hovering and you are also changing the page, the change to the page can cause the element to lose the mouse hover which then hides the change to the page and then it all starts over again. I can't tell for sure if that is happening in your case (I'd need a working example to play with to see), but it seems possible.