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);
Related
In my fabricjs application, I had created dynamic canvases(variable's also dynamic). Here, I need to detect particular canvas while mouse move on canvas.
Sample code,
var i = 0, canvasArray = [];
$(this).find('canvas').each(function() {
i++;
var DynamicCanvas = 'canvas_'+i;
canvasArray[DynamicCanvas] = new fabric.Canvas('canvas_'+i,{
width : '200',
height : '200'
});
});
after this, I have 4 different canvases. Last added canvas has been activated. But i need to add object on any canvas.
So that i have to activate canvas using mouse move event. How can i achieve it.? Please help me on this.
Mullainathan,
Here some quick solution using jQuery:
var canvasStr = '';
var canvasArray = [];
var fabricCanvasArray = [];
var htmlStr = '';
var canvas = null;
//generate canavases
for (var i = 0; i < 4; i++){
canvasArray.push('c' + i);
htmlStr += '<canvas id="c' + i + '" width="200" height="200"></canvas>'
}
//append canvasses to the body
$('body').append(htmlStr);
//to the fabricjs parent div elements assign id's and generate string for jQuery with div id's
for (var i in canvasArray){
fabricCanvasArray[i] = new fabric.Canvas(canvasArray[i], {
isDrawingMode: true
});
$('#' + canvasArray[i]).parent().attr('id', ('div' + canvasArray[i]));
canvasStr += '#div' + canvasArray[i];
if (i < canvasArray.length - 1){
canvasStr += ',';
}
}
//jQuery event for mouse over each div element of the fabric canvas
$(canvasStr).mouseover(function(){
for (var i in fabricCanvasArray){
if (fabricCanvasArray[i].lowerCanvasEl.id == $(this).children(':first').attr('id')){
canvas = fabricCanvasArray[i];
canvas.freeDrawingBrush.width = 10;
var r = 255 - i*50;
var g = i * 50;
var b = 200 - i * 40;
canvas.freeDrawingBrush.color = 'rgb(' + r + ',' + g + ',' + b + ')';
canvas.on('mouse:up', function() {
//do your stuff
// canvas.renderAll();
});
break;
}
}
});
Also, you can run fiddle
I have been using the Freewall jQuery plugin in order to generate a responsive grid-based image gallery. Such a piece of work, I have to say. However, I have been struggling to find a way to make the pictures linkable, given that the images of the gallery are retrieved in an automated manner:
<script type="text/javascript">
var temp = "<div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div>";
var w = 280, h = 320, html = '', limitItem = 15;
for (var i = 0; i < limitItem; ++i) {
html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1);
}
$("#freewall").html(html);
var wall = new freewall("#freewall");
wall.reset({
selector: '.cell',
animate: true,
cellW: 280,
cellH: 320,
onResize: function() {
wall.refresh();
}
});
wall.fitWidth();
// for scroll bar appear;
$(window).trigger("resize");
</script>
In other versions of the code, Minh has placed the code of every single picture of the gallery in the html file. What I find particularly useful is the automated retrieval of the JS code and I would like to know... Is there an automated way of associating each of the pictures to a certain link, thus making the pictures linkable?
That would be: 1 to A, 2 to B, 3 to C and so on.
Not 100% sure what you would like to see but perhaps you could do something like this (trying to keep it the same way you've been doing it) :
<script type="text/javascript">
var links = ["A.html", "B.html", "C.html"];
var titles = ["titleA", "titleB", "titleC"];
var temp = "<a href='{link}' ><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'><div class='showOnHover'>{title}</div></div></a>";
var w = 280, h = 320, html = '', limitItem = 15;
for (var i = 0; i < limitItem; ++i) {
html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[i]).replace("{title}", titles[i]);
}
$("#freewall").html(html);
var wall = new freewall("#freewall");
wall.reset({
selector: '.cell',
animate: true,
cellW: 280,
cellH: 320,
onResize: function() {
wall.refresh();
}
});
wall.fitWidth();
// for scroll bar appear;
$(window).trigger("resize");
</script>
Please using this
var links = ["A.html", "B.html", "C.html"];
var titles = ["titleA", "titleB", "titleC"];
var temp = "<a href='{link}' title='{title}'><div class='cell' style='width:{width}px; height: {height}px; background-image: url(grid-images/photo/{index}.jpg)'></div></a>";
var w = 280, h = 320, html = '', limitItem = 15;
var index = 0;
for (var i = 0; i < limitItem; ++i) {
index = i % 3;
html += temp.replace(/\{height\}/g, h).replace(/\{width\}/g, w).replace("{index}", i + 1).replace("{link}", links[index]).replace("{title}", titles[index]);
}
$("#freewall").html(html);
follow the variable index
I'm creating a bunch of divs and inserting thumbnail images through a referenced js file using a simple function. Basically i'm trying to assign the click handler to each new div in the loop but for probably syntax reasons it isn't working.
This is my code ( updated )...
function makethumbs() {
for (var i = 0; i < 14; i++) {
var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg",
newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84});
newdiv.css({display:'inline',
float:'left',
margin:'2px 2px 0 0',
color:'#000',
fontSize:'18px',
zIndex:0,
html:'P',
background: 'url(' + backgroundUrl + ')'
});
newdiv.click(function() {
$(this).stop(true, true).fadeTo('slow', 0);
});
$('#thumbholder').append(newdiv);
}
$('#arrowright').click(function() {
var L = $('#thumbholder'),
margL = parseInt(L.css('marginLeft'), 10),
newMarg = (margL - 147) + 'px',
anim = {opacity: 1};
anim["marginLeft"] = newMarg;
$('#thumbholder').stop(true, true).animate(anim, 400);
});
}
Theres an extra click handler there too for #arrowright which works fine. Not sure if its a z ordering thing as the clickable arrow div is inside a container which overlays the thumbnail divs if that makes sense.
Why not keep on using jQuery ?
function makethumbs() {
for (var i = 0; i < 14; i++) {
var backgroundUrl = script_vars + "/images/gallery/thumbs/g" + (i+1) + ".jpg",
newdiv = $('<div />', {id: 'thumbnail'+i, width: 145, height: 84});
newdiv.css({display:'inline',
float:'left',
margin:'2px 2px 0 0',
color:'#000',
fontSize:'18px',
zIndex:0,
html:'P',
background: 'url(' + backgroundUrl + ')'
});
newdiv.click(function() {
$(this).stop(true, true).fadeTo('slow', 0);
});
$('#thumbholder').append(newdiv);
}
$('#arrowright').click(function() {
var L = $('#thumbholder'),
margL = parseInt(L.css('marginLeft'), 10),
newMarg = (margL - 147) + 'px',
anim = {opacity: 1};
anim["marginLeft"] = newMarg;
$('#thumbholder').stop(true, true).animate(anim, 400);
});
}
as your main problem is trying to attach a click handler with jQuery syntax to a native JS DOM element.
change newDiv.click to $(newDiv).click since you seem to be using jQuery; however if you want to continue using native javascript you can set an event for the element like so:
newDiv.addEventListener('click',function(){
//you code here
});
This Javascript controls a Monial Content box with forward and back buttons to move forwards or backwards but it only works for 2 DIVs, how can I make this script work with an array so I can add more elements?
e.g.
Current Script Diagram
The Script Code
$(document).ready(function(e) {
showQuote();
$(".left").click(function(e) {
$("#monial_btn_1").trigger("click");
});
$(".right").click(function(e) {
$("#monial_btn_2").trigger("click");
});
$("#monial_btn_1").click(function(e) {
$(".monial_content_1").fadeIn("fast");
$(".monial_content_2").fadeOut("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_2");
obj.removeClass();
obj.addClass("monial_btn");
});
$("#monial_btn_2").click(function(e) {
$(".monial_content_1").fadeOut("fast");
$(".monial_content_2").fadeIn("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_1");
obj.removeClass();
obj.addClass("monial_btn");
});
var n = 10
for(i = 1; i < n; i++) {
$("#monial_btn_" + i).click(function(e) {
$(".monial_content_" + i).fadeIn("fast");
$(".monial_content_" + (i + 1)).fadeOut("fast");
var obj=$(this);
obj.removeClass();
obj.addClass("monial_btn_selected");
obj=$("#monial_btn_" + (i + 1));
obj.removeClass();
obj.addClass("monial_btn");
});
}
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});