That's pretty much what I am trying to accomplish. To have each image appear with a different transition effect.
Can you please help me fix and figure out what's wrong with my code?
jQuery:
var url = 'http://www.mywebsite.com/';
var img_dir = '_img/slideshow/';
var fx =
[
'blindX',
'blindY',
'blindZ',
'cover',
'curtainX',
'curtainY',
'fade',
'fadeZoom',
'growX',
'growY',
'scrollUp',
'scrollDown',
'scrollLeft',
'scrollRight',
'scrollHorz',
'scrollVert',
'shuffle',
'slideX',
'slideY',
'toss',
'turnUp',
'turnDown',
'turnLeft',
'turnRight',
'uncover',
'wipe',
'zoom'
];
var index = 0;
$(function() {
var $slideshow = $('#slideshow');
// add slides to slideshow (images 2-3)
for (var i = 2; i < 13; i++)
$slideshow.append(
'<a href="' + url + img_dir + i+'.jpg" title="Slideshow">'+
//src="http://www.mywebsite.com/_img/slideshow/"
'<img src="' + url + img_dir + i+'.jpg" width="100" height="100" />'+
'</a>');
// start the slideshow
$slideshow.cycle(
{
if( index < fx.length ) { index++; }
else { index = 0; }
fx: fx[index],
timeout: 3000
});
});
To use all the effects it is quite easy:
http://jsfiddle.net/lucuma/tcRCj/14/
$('#slideshow').cycle({fx:'all'});
Furthermore if you just want to specify certain ones:
$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade'});
And if you do NOT want to randomize the effect order (it will randomize by default):
$('#slideshow').cycle({fx:'scrollDown,scrollLeft,fade', randomizeEffects:0});
Related
<img src="link" id="hof" </div>
<span id="myspan">Compliment: </span>
<script type="text/javascript">
function change() {
// ---------- Caption and images !! -----------//
var things = ["Slide01", "Slide04", "Slide05", "Slide06"];
var captions = ["Very nice", "Awesome", "Cool", "Best"];
// ^^^^^^^^^^ Captions and Images !! ^^^^^^^^^^ //
var image = document.getElementById('hof');
var thing = things[];
image.src = "link" + thing + ".jpg"; // change the image
span = document.getElementById("myspan");
span.innerText= "Compliment: " + captions[]; //change caption
}
setInterval('change()', 4000);
</script>
So i am new to javascript i am trying to make a slideshow with captions but i need the values in the array to display in sequence like (slide01>slide02>slide03) then repeat from the start when it reaches the last value.
To answer what you actually asked: You'd use an index variable defined outside change. Start with 0 and (after rendering the slide) increment it, wrapping around when you get to things.length. There's a trick for that last part:
index = (index + 1) % things.length;
Other notes:
Don't use parallel arrays, use an array of objects.
var slides = [
{name: "Slide01", caption: "Very Nice"},
// ...
];
then
var slide = slides[index];
image.src = "link" + slide.name + ".jpg";
span.innerText = "Compliment: " + slide.caption + ".jpg";
Define that array outside change, there's no need to re-create it every time change is called.
Don't pass strings into setInterval or setTimeout; pass in the function instead:
setInterval(change, 4000);
Consider wrapping all of your code in a scoping function so index, the array of slides, and the change function aren't globals:
(function() {
// ...your code here...
})();
<body onload="imgcarousel()">
<img src="" id="hof">
<p id="caption"></p>
<button onclick="imgcarousel()">Next</button>
</body>
<script>
var count = 0;
var things = ['Slide01', 'Slide04', 'Slide05', 'Slide06'] ;
var captions = ['Very Nice','Awesome','Cool','Best'];
function imgcarousel()
{
count++;
var img = document.getElementById("hof");
var caption = document.getElementById("caption");
if(count >= things.length)
{
count = 0;
}
img.src = things[count]+".png";
caption.innerHTML = "Compliments: " +captions[count];
}
</script>
I am using a mixture of freewall and featherlight plugins to produce a responsive gallery which opens into a lightbox, however, I am having the following issue with trying to get the lightbox to switch to the next image (i + 1) when clicked.
The Lightbox image code enter image description here. What I want to do is to change the img src to i + 1 so it will go to the next image on click.
I also have this project on Github which might help understand: https://github.com/adamianniello/adamianniello.com/blob/master/B%C3%A6b%C3%A6l%C9%99n_Pasadena.html
<script type="text/javascript">
var temp = "<div class='brick' style='width:{width}px;'><a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>";
var w = 1, h = 1, html = '', limitItem = 54;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("{index}", i + 1).replace("{link}",i + 1);
}
$("#freewall").html(html);
var wall = new Freewall("#freewall");
wall.reset({
selector: '.brick',
animate: true,
cellW: 150,
cellH: 'auto',
onResize: function() {
wall.fitWidth();
}
});
var images = wall.container.find('.brick');
images.find('img').load(function() {
wall.fitWidth();
});
<div id="freewall" class="free-wall"></div>
You have to manually trigger the next element on click on the image. Just do something like below
A function to trigger featherlight to show next image. I had assumed you initialize featherlite using .brick a css selector. Feel free to change this to your desired one. This function builds your next a tags data-featherlight and calls featherlight over it.
function showNextImage(i) {
$('.brick a').featherlight('i/jpl/' + (((i +1) % (limitItem + 1))) + '.jpg');
}
Add a onclick in your div to call the function with current i.
var temp = "<div class='brick' style='width:{width}px;' onclick='showNextImage({index})'> <a href='#' data-featherlight='i/jpl/{link}.jpg'><img src='i/jpl/{index}.jpg' width='100%'></a></div>";
var w = 1, h = 1, html = '', limitItem = 54;
for (var i = 0; i < limitItem; ++i) {
w = 1 + 3 * Math.random() << 0;
html += temp.replace(/\{width\}/g, w*150).replace("/\{index\}/g", i + 1).replace("{link}",i + 1);
}
$("#freewall").html(html);
Working with Fancybox version 1.3.4. Fancybox is working perfectly, I am trying to add the zooom Effect to Fancybox.
Till now i have been able to apply the effect to the image when clicked open in fancybox window. But that is half done, as when i close fancybox, the zoom effect still remains.
I load 5 images and on hover on each image, the top image gets changed. I want to apply the zooom effect on the image which shows when the mouse is moved on the small thumbnail and it shows in big screen. [Here i am unable to apply zooom, i am missing something, but what not sure]
This is my Try Till now:
<div class="CWproductThumbs">
<img class="CWthumb" src="cw4/images/product_thumb_details/012.jpg" alt="Digital HD Video Camera">
<img class="CWthumb" src="cw4/images/product_thumb_details/006.jpg" alt="Digital HD Video Camera">
</div>
Jquery code;
jQuery(document).ready(function(){
// set filename on any image element
var $setSrc = function(triggerEl,targetEl){
var triggerSrc = jQuery(triggerEl).attr('src');
var triggerIndex = triggerSrc.lastIndexOf("/") + 1;
var newFn = triggerSrc.substr(triggerIndex);
var targetSrc = jQuery(targetEl).attr('src');
var targetIndex = targetSrc.lastIndexOf("/") + 1;
var oldFn = targetSrc.substr(targetIndex);
var targetDir = targetSrc.replace(oldFn,'');
var newSrc = targetDir + newFn;
targetEl.attr('src',newSrc);
};
// set href on any link
var $setHref = function(triggerEl,targetEl){
var triggerHref = jQuery(triggerEl).attr('href');
var triggerIndex = triggerHref.lastIndexOf("/") + 1;
var newFn = triggerHref.substr(triggerIndex);
var targetHref = jQuery(targetEl).attr('href');
var targetIndex = targetHref.lastIndexOf("/") + 1;
var oldFn = targetHref.substr(targetIndex);
var targetDir = targetHref.replace(oldFn,'');
var newHref = targetDir + newFn;
targetEl.attr('href',newHref);
};
jQuery('img.CWthumb').hover(function(){
$setSrc(jQuery(this),jQuery('#CWproductImgMain'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105imgLink'));
$setHref(jQuery(this).parent('a'),jQuery('#CWproduct105zoomLink'));
});
jQuery('a.CWimageZoomLink').each(function(){
jQuery(this).fancybox({
'titlePosition': 'over',
'padding': 0,
'margin' : 0,
'overlayShow': true,
'showCloseButton': true,
'hideOnOverlayClick':true,
'hideOnContentClick': true,
'autoDimensions': true,
'centerOnScroll': true,
'showNavArrows':true,
'cyclic':true,
'onComplete' : function() {
jQuery('#fancybox-img').imagezoomsl({innerzoommagnifier: true,
classmagnifier: window.external ? window.navigator.vendor === "Yandex" ? "" : "round-loupe" : "",
magnifierborder: "5px solid #F0F0F0",
zoomrange: [2, 8],
zoomstart: 4,
magnifiersize: [150, 150]})
}
});
jQuery('a.CWtriggerZoomLink').click(function(){
var zoomHref = jQuery(this).attr('href');
jQuery('a.CWimageZoomLink[href="' + zoomHref + '"]').trigger('click');
return false;
});
// fancybox - see http://fancybox.net/api for available options
});
});
Jquery Zooom Plugin used is;
www.zoomsl.tw1.ru
I have a list of images that is rendered as thumbnails after upload. The issue that I have is I need the dimensions of the fully uploaded images, so that I can run a resize function if sized incorrectly.
Function that builds the image list
function buildEditList(json, galleryID)
{
//Hide the list
$sortable = $('#sortable');
$sortable.hide();
for(i = 0, j = json.revision_images.length; i < j; i++) {
$sortable.append(
"<li id='image_" + json.revision_images[i].id + "'><a class=\"ui-lightbox\" href=\"../data/gallery/"
+ galleryID
+ "/images/album/"
+ json.revision_images[i].OrgImageName
+ "\"><img id=\""
+ json.revision_images[i].id
+ "\" alt=\"\" src=\"../data/gallery/"
+ galleryID
+ "/images/album/"
+ json.revision_images[i].OrgImageName
+ "\"/></a></li>"
).hide();
}
//Set first and last li to 50% so that it fits the format
$('#sortable li img').first().css('width','50%');
$('#sortable li img').last().css('width', '50%');
//Fade images back in
$sortable.fadeIn("fast",function(){
var img = $("#703504"); // Get my img elem -- hard coded at the moment
var pic_real_width, pic_real_height;
$("<img/>") // Make in memory copy of image to avoid css issues
.attr("src", $(img).attr("src"))
.load(function() {
pic_real_width = this.width; // Note: $(this).width() will not
pic_real_height = this.height; // work for in memory images.
});
alert(pic_real_height);
});
}
I have been trying to use the solution from this stackoverflow post, but have yet to get it to work, or it may just be my code. if you have any ideas on this I could use the help. Currently the alert is coming back undefined.
There's a newer js method called naturalHeight or naturalWidth that will return the information you're looking for. Unfortunately it wont work in older IE versions. Here's a function I created a few months back that may work for you. I added a bit of your code below it for an example:
function getNatural($mainImage) {
var mainImage = $mainImage[0],
d = {};
if (mainImage.naturalWidth === undefined) {
var i = new Image();
i.src = mainImage.src;
d.oWidth = i.width;
d.oHeight = i.height;
} else {
d.oWidth = mainImage.naturalWidth;
d.oHeight = mainImage.naturalHeight;
}
return d;
}
var img = $("#703504");
var naturalDimension = getNatural(img);
alert(naturalDimension.oWidth, naturalDimension.oHeight)
I'm a hopeless javascript newbie and I'm trying to insert dynamically created image elements into DOM while positioning and rotating them randomly.
At the moment I'm basically doing this:
Create an array with all the image file paths
Create a div with dynamically created name and insert into DOM
Generate 20 different instances of the images and insert into DOM to the corresponding div
Rotate each image by a random amount and position each image randomly. For rotation I use the jQuery rotate plugin.
I have a feeling I'm doing all this in a very stupid way since I'm first inserting the elements into DOM and THEN manipulating their position and rotation.
Is there a way to first do everything in virtual memory and finally insert the elements to DOM when all the manipulations have already been done?
Here is my current code (sorry for the noobish quality):
$(document).ready(function(){
var wrapper = $('#wrapper'),
function movieCreator(movieName, generateAmount){
var contents=new Array (
'<img class="film '+movieName+'" src="images/'+movieName+'01.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'02.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'03.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'04.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'05.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'06.png" alt="'+movieName+'" />',
'<img class="film '+movieName+'" src="images/'+movieName+'07.png" alt="'+movieName+'" />'
);
var tmp='';
var dynamicIdName = 'box'+movieName;
var dynamicIdCall = '#box'+movieName;
wrapper.append("<div id='"+dynamicIdName+"' class='moviebox'></div>");
var random
for (i=0; i < generateAmount;){
random = Math.floor(Math.random()*contents.length);
tmp += contents[random];
i++
};
$(dynamicIdCall).append(tmp);
$(".film").each(function(){
randomrot = Math.floor(Math.random()*360);
randomposX = Math.floor(Math.random()*200);
randomposY = Math.floor(Math.random()*200);
$(this).rotate(randomrot);
$(this).css({'top': randomposY -40});
$(this).css({'left': randomposX -40});
});
wrapper.on('click','.film',function(){
imageControl(this);
});
} //end movieCreator
movieCreator('terminator', 20);
movieCreator('rambo', 20);
movieCreator('godfather', 20);
movieCreator('matrix', 20);
movieCreator('kingkong', 20);
}); //dom ready
I'm trying to cover lots of things here...
You have an unexpected ,:
var wrapper = $('#wrapper'),
---^
You can use [] instead of new Array():
var contents = [ ... ]
Careful, i is global, use var. Also, you can move i++ to the for loop:
for (var i = 0; i < generateAmount; i++){
---^--- ---^---
Those are common beginner mistakes. Try to grasp those concepts first and then if you want best performance, append everything at last. You can then refactor everything to this, I commented a few things:
var $wrap = $('#wrapper')
var movieCreator = function (name, ammount) {
// Utility function to keep it DRY
var rand = function (len) {
return ~~(Math.random() * len) // ~~ trick Math.floor
}
// Cache your container in a variable
var $container = $('<div/>', {
id: 'box' + name,
'class': 'moviebox'
})
// Generate iamges with an array
// to keep it DRY
var imgs = []
for (var i = 0; i < 7; i++) {
imgs.push(
'<img ' +
'class="film '+ name +'"'+
'src="images/'+ name +'0'+ i + '.png"'+ // If no with more than 10...
'alt="'+ name +'"'+
'/>'
)
}
var randImgs = []
for (var i = 0; i < ammount; i++)
randImgs.push(imgs[rand(imgs.length)])
// Attach events before inserting in DOM
// that way you don't need delegation with on()
var $imgs = $(randImgs.join(''))
$imgs
.click(function(){
imageControl(this)
})
.each(function(){
var rot = rand(360),
posX = rand(200),
posY = rand(200)
$(this)
.css({
top: posY - 40 + 'px', // use units (px, em)
left: posX - 40 + 'px'
})
.rotate(rot)
})
// Finally insert in DOM. It already has
// all events attached and position changed
$wrap.append($container.append($imgs))
}