JS if there is a slider show it - javascript

I'm no JS expert but I'm trying to alter this so that if there is a royalslider display it… if there isn't display the static image and the title and description. Any ideas as to why this isn't working? my head is currently spinning… I've left some space around the section I'm trying to add to the code under //royal slider fix and currently its just showing the title and description from the if statement. But, the markup is showing the slider div and outputting the code.
Any help would be very appreciated! You can preview this code and what I'm trying to do here... http://bvh.delineamultimedia.com/?page_id=2
;(function($) {
$.fn.SuperBox = function(options) {
var superbox = $('<div class="superbox-show"></div>');
var superboximg = $('<img src="" class="superbox-current-img">');
var superboxclose = $('<div class="superbox-close"></div>');
superbox.append(superboximg).append(superboxclose);
return this.each(function() {
$('.superbox').on('click', '.superbox-list', function() {
//allows for superbox to work inside of quicksand
$('ul.filterable-grid').css({overflow: 'visible'});
var currentimg = $(this).find('.superbox-img');
superbox.find('.title').remove();
superbox.find('.description').remove();
var imgData = currentimg.data();
superboximg.attr('src', imgData.img);
if (imgData.title) { superbox.append('<h3 class="title">'+imgData.title+'</h3>'); }
if (imgData.description) { superbox.append('<div class="description">' + imgData.description + '</div>'); }
//royal slider fix
superbox.find('.royalSlider').remove(); // remove the slider from previous events
var imgData = currentimg.data();
var sliderData = currentimg.next('.royalSlider'); // grab the slider html that we want to insert
superboximg.attr('src', imgData.img);
if (sliderData) { // show the slider if there is one
superbox.clone().append(sliderData); // clone the element so we don't loose it for the next time the user clicks
} else { // if there is no slider proceed as before
if (imgData.img) {
superbox.append(imgData.img);
}
if (imgData.title) {
superbox.append('<h3 class="title">' + imgData.title + '</h3>');
}
if (imgData.description) {
superbox.append('<div class="description">' + imgData.description + '</div>');
}
}
if($('.superbox-current-img').css('opacity') == 0) {
$('.superbox-current-img').animate({opacity: 1});
}
if ($(this).next().hasClass('superbox-show')) {
superbox.toggle();
} else {
superbox.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop:superbox.position().top - currentimg.width()
}, 'medium');
});
$('.superbox').on('hover', '.superbox-list', function(e) {
$(this).find('.overlay').stop()[(e.type == 'mouseenter') ? 'fadeIn' : 'fadeOut']('slow');
});
$('.superbox').on('click', '.superbox-close', function() {
$('.superbox-current-img').animate({opacity: 100}, 200, function() {
$('.superbox-show').slideUp();
});
});
});
};
})(jQuery);

This is only intended to be hints, not an attempt to solve the entire problem.
Try this:
var superbox = $('<div class="superbox-show"/>');
var superboximg = $('<img src="" class="superbox-current-img"/>');
var superboxclose = $('<div class="superbox-close"/>');
if (sliderData.length > 0)
Where is imgData.img getting its value?

Related

Using Fotorama api for custom thumbnails and captions

I am building a site using the Fotorama (www.fotorama.io) Jquery plugin. I have been using this code to generate custom thumbnails (jsfiddle):
$('.thumbs').each(function () {
$('a', this).each(function () {
var $a = $(this);
// set ids, will use them later
$a.attr({id: $a.attr('href').replace(/[\/\.-]/g, '')});
});
var $thumbs = $(this),
$fotorama = $thumbs.clone();
$fotorama
.on('fotorama:show', function (e, fotorama) {
// pick the active thumb by id
$('#' + fotorama.activeFrame.id)
.addClass('active')
.siblings()
.removeClass('active');
})
.addClass('fotorama')
.removeClass('thumbs')
.insertAfter(this)
.fotorama({nav: false, width: '100%', maxHeight: 400, ratio: 3/2});
// get access to the API
var fotorama = $fotorama.data('fotorama');
$thumbs.on('click', 'a', function (e) {
e.preventDefault();
// show frame by id
fotorama.show(this.id);
});
});
This code works very well but I also need custom captions. I found the following code (jsfiddle) but I am struggling with putting the two bits of code together. I'm just learning Javascript and JQuery and could do with a hand combining the script to work as one. Everything I have tried so far has failed.
$('.fotorama')
.on('fotorama:show', function (e, fotorama) {
fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
var activeFrame = fotorama.activeFrame;
fotorama.$caption.html(
'<strong>' + activeFrame.title + '</strong><br>'
+ activeFrame.author
);
})
.fotorama();
Solved with the help of isherwood. Please find solution here http://jsfiddle.net/vCUC2/97/
$('.thumbs').each(function () {
$('a', this).each(function () {
var $a = $(this);
// set ids, will use them later
$a.attr({
id: $a.attr('href').replace(/[\/\.-]/g, '')
});
});
var $thumbs = $(this),
$fotorama = $thumbs.clone();
$fotorama.on('fotorama:show', function (e, fotorama) {
// pick the active thumb by id
$('#' + fotorama.activeFrame.id)
.addClass('active')
.siblings()
.removeClass('active');
var activeFrame = fotorama.activeFrame;
fotorama.$caption = fotorama.$caption || $(this).next('.fotorama-caption');
fotorama.$caption.html(
'Title: <strong>' + activeFrame.title + '</strong><br>Caption: ' + activeFrame.author);
})
.addClass('fotorama')
.removeClass('thumbs')
.insertAfter(this)
.fotorama({
nav: false,
width: '100%',
maxHeight: 400,
ratio: 3 / 2
});
// get access to the API
var fotorama = $fotorama.data('fotorama');
$thumbs.on('click', 'a', function (e) {
e.preventDefault();
// show frame by id
fotorama.show(this.id);
});
});

JavaScript changing image when hovering

I am trying to write a script, so that when someone hovers over an image, that same images changes to a different one, ie. I hover over up.png, and it changes to up_highlighted.png, when the mouse goes off the image it should change back.
However I can't seem to get it working despite all my attempts, here is the relevant code of what I have tried so far:
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up()\" onclick=\"increase_rating()\">";
function hover_up(){
$(document).ready(function() {
var oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').hover(function() {
//on hover of your element
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}, function() {
//when the cursor leaves your element
$('.thumbsbtn1').attr('src', oldSrc);
});
});
}
PS. I do not wish to use sprites.
Old School: http://jsfiddle.net/PAGUp/
var elem = document.getElementById('targetImg');
var oldSrc;
elem.onmouseover = function() {
oldSrc = elem.src;
elem.src = 'http://www.eclipse-developers.com/images/up_hover.png';
}
elem.onmouseout = function() {
if(typeof oldSrc !== 'undefined') {
elem.src = oldSrc;
}
}
I'm sure the jquery is more pithy. Essentially you need a variable to hold the 'old' src URL, and mouseover and mouseout handlers to set the new URL and back it out.
You don't have to wrap $(document).ready inside hover_up function. Note that I have removed onhover from HTML
Try
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onclick=\"increase_rating()\">";
$(document).ready(function() {
var oldSrc;
$(document).on('hover', '.thumbsbtn1', function () {
oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}, function () {
$('.thumbsbtn1').attr('src', oldSrc);
});
});
try this
print "<img src=\"/images/up.png\" class=\"thumbsbtn1\" style=\"position:absolute;top:60px;left:1px;width:28px;\" onhover=\"hover_up(this)\" onclick=\"increase_rating()\" onmouseout=\"hover_out(this)\">";
var oldSrc;
function hover_up(e){
oldSrc = $('.thumbsbtn1').attr('src');
$('.thumbsbtn1').attr('src','/images/up_hover.png');
}
function hover_out(e){
$('.thumbsbtn1').attr('src',oldSrc);
}

Getting the next image and previous image from an gallery

I am trying to code my own image gallery using html css jquery. I have a modal window to show the clicked in images. Inside my modal window I have a previous and next button.
My question is how can i show the previous images or next images when someone click that button.
Here's my jsFiddle
jquery code i am using to show clicked in images.
$(function(){
$('.gallery a').click(function(evt) {
evt.preventDefault( );
var imgPath = $(this).attr('href');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src',imgPath);
return false;
});
});
Add this to your jQuery.
Declare a variable current image in your function and keep current image saved in that variable. Update the variable whenever current image is changed.
Updated jsfiddle
Click on the second image in the images and see the prev and next image then.
$('.gallery-control-previous').click(function(){
var imgPath = current_img.prev().attr('href');
current_img = current_img.prev();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
$('.gallery-control-next').click(function(){
var imgPath = current_img.next().attr('href');
current_img = current_img.next();
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
If you have understood this answer, add checks to the code showing next, prev elemments only when they exist.
You can find how to do that,
here..
Updated.
Get the first child of next row, and pass that.
$('.gallery-control-next').click(function(){
if(current_img.next().length){
current_img = current_img.next();
}else{
current_img = current_img.parents(".row").next(".row").find("a:first");
}
var imgPath = current_img.attr('href');
$('.gallery-overlay').show().find('.gallery-image').attr('src',imgPath);
});
I have added img_no to each a tag to identify the current active image and get next or previous image
Working Demo
$(function () {
$('.gallery a').click(function (evt) {
evt.preventDefault();
var imgPath = $(this).attr('href');
var img_no = $(this).attr('img_no');
$('.gallery-overlay').show()
.find('.gallery-image').attr('src', imgPath).attr('img_no', img_no);
return false;
});
});
i = 1;
$('.row a img').each(function () {
$(this).attr('img_no', i);
$(this).parents('a').attr('img_no', i);
i++;
});
images_length = i - 1;
console.log(images_length);
$('.gallery-control-next').click(function () {
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no++;
if (img_no > images_length) {
img_no = 1;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});
$('.gallery-control-previous').click(function(){
var img_no = $(this).parent().parent().find('.gallery-image').attr('img_no');
img_no--;
if (img_no <= 0) {
img_no = images_length;
}
$('.row a').each(function () {
if ($(this).attr('img_no') == img_no) {
imgPath = $(this).attr('href');
}
});
$('.gallery-imagebox img').attr('src', imgPath).attr('img_no', img_no);
});

If/Else Statement showing differently on Click.

http://bvh.delineamultimedia.com/?page_id=2 -> if you click the first image there is a gallery in the dropdown… which is what I want. But, if you close it and re-open it. it goes to a static image.
So there is a function statement in this js I'm working with and can't seem to figure it out what the problem is. http://bvh.delineamultimedia.com/wp-content/themes/bvh/js/portfolio/superbox.js
Here is the function...
$('.superbox').on('click', '.superbox-list', function (e) {
//allows for superbox to work inside of quicksand
$('ul.filterable-grid').css({
overflow: 'visible'
});
var currentimg = $(this).find('.superbox-img');
// cleanup
superbox.find('.title').remove();
superbox.find('.description').remove();
superbox.find('.royalSlider').appendTo(superboximg);
//superbox.find('.royalSlider').appendTo($(this)); // remove the slider from previous events
//superbox.find('.royalSlider').remove();
var imgData = currentimg.data();
superboximg.attr('src', imgData.img);
if (imgData.title) {
superbox.append('<h3 class="title">' + imgData.title + '</h3>');
}
if (imgData.description) {
superbox.append('<div class="description">' + imgData.description + '</div>');
}
//royal slider fix
var sliderData = currentimg.siblings('.royalSlider'); // grab the slider html that we want to insert
if (sliderData.length > 0) { // show the slider if there is one
superbox.append(sliderData); // clone the element so we don't loose it for the next time the user clicks
superboximg.css('display', 'none');
} else { // if there is no slider proceed as before
if (imgData.img) {
superboximg.attr('src', imgData.img);
superboximg.css('display', 'block');
}
}
if ($('.superbox-current-img').css('opacity') == 0) {
$('.superbox-current-img').animate({
opacity: 1
});
}
if ($(this).next().hasClass('superbox-show')) {
superbox.toggle();
} else {
superbox.insertAfter(this).css('display', 'block');
}
$('html, body').animate({
scrollTop: superbox.position().top - currentimg.width()
}, 'medium');
});
If you re-open the page, the browser will just load the url (http://bvh.delineamultimedia.com/?page_id=2 ) again from scratch. If you want to re-display something, you have to change the url and make sure that JavaScript picks it up. This is commonly done with window.location.hash.

Bug with image slider

My company had a website created by a design agency. They use a custom CMS, which makes it very difficult to get into the raw code of the site. I've been trying to catch a particular bug with our image slider.
http://informedfamilies.org/
When you click on the navigation buttons in the slider ("1,2,3,4,5"), the slide switches to the appropriate image, but only the first time. If you click another button a second time, the slider doesn't change. The shadow below the image seems to get darker, so I'm assuming the images are simply not going away, and simply stacking under the main image.
Any help fixing this issue would be greatly appreciated.
Relevant code:
$('#home_features .listeditem').wrapAll('<div id="fade" />');
$('#fade').css('background', 'transparent');
var featureCt = $('#fade .listeditem').length;
if (featureCt > 1) {
$('#home_features').each(function() {
var controlDiv = $('<div />').attr('id', 'switcher');
for (var i = 1; i <= featureCt; i++) {
var control = $('' + i + '');
if (i == 1) control.addClass('selected first');
if (i == featureCt) control.addClass('last');
controlDiv.append(control);
}
$(this).append(controlDiv);
controlDiv.append('||');
controlDiv.append('▶');
});
}
$("#fade").innerfade({
speed: 2000,
timeout: 5000,
containerheight: 440,
tracker: "switcher",
trackerclass: "selected",
repeat: 1
});
$(".selector").click(function() {
if (this.id == "stop" || this.id == "start") {
return;
}
if($("#fade").data("timer")) {
clearTimeout($("#fade").data("timer"));
$("#fade").removeData("timer");
$("#stop").hide();
$("#start").show();
}
var id = Number(this.id.substr(1));
$(".selector").removeClass("selected");
$(this).addClass("selected");
$("#fade>div:visible").fadeOut(1);
$("#fade>div.item" + id).fadeIn(1, function() {
$('body').removeMatchedClasses({ pattern: /^slide/ });
$('body').addClass('slide' + (id - 1));
});
var num = $("#fade").data("num_elements");
if (id < num) {
$("#fade").data("next", id);
} else {
$("#fade").data("next", 0);
}
return false;
});
$("#stop").click(function() {
clearTimeout($("#fade").data("timer"));
$("#fade").removeData("timer");
$("#stop").hide();
$("#start").show();
return false;
});
$("#start").click(function() {
$("#start").hide();
$("#stop").show();
$(".selector").removeClass("selected");
$("#fade").innerfade({
speed: 2000,
timeout: 10000,
containerheight: 440,
tracker: "switcher",
trackerclass: "selected"
});
var id = $("#fade").data("next");
$("#s" + id).addClass("selected");
return false;
});
The slider method is instantiated on line 37 of site.js. On line 81, I'm seeing the following error when clicking on each of the selectors:
Uncaught TypeError: Object [object Object] has no method 'removeMatchedClasses'
There is no function declaration for removeMatchedClasses. It simply does not exist.
What they're trying to do is remove any classes that match the regex /^slide/ from the body.
My recommendation is to replace line 81 with the following:
$('body').removeClass(function(i, c) {
return c.match(/^slide/).join(" ");
});
Let me know how this works for you.

Categories

Resources