Jquery with Sliing page and sliding images - javascript

i just finished the 5 Sliding page site, which each page i have image slider.
i am using Image slider within Page Slider. when i am trying to use the same image slider with different images for page slide 3, its not working. please help would be great Appreciate.
i am not good in Jquery, so i did lot of research and no luck...
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen2">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/1.jpg',
original: 'images/originals/1.jpg',},
{
preview: 'images/previews/2.jpg',
original: 'images/originals/2.jpg',},
{
preview: 'images/previews/3.jpg',
original: 'images/originals/3.jpg',},
{
preview: 'images/previews/4.jpg',
original: 'images/originals/4.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
<div id="address">
<img src="images/address.png" width="300" height="119" alt="address">
</div>
<div id="shop">
<img src="images/shop.jpg" width="300" height="225" alt="Shop">
</div>
<div class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
<div id="kitchen3">
<script type="text/javascript">
$(function(){
var options = {
firstImageIndex: 0,
borderWeight: 0 },
params = {
sources: [
{
preview: 'images/previews/5.jpg',
original: 'images/originals/5.jpg',},
{
preview: 'images/previews/6.jpg',
original: 'images/originals/6.jpg',},
{
preview: 'images/previews/7.jpg',
original: 'images/originals/7.jpg',},
{
preview: 'images/previews/8.jpg',
original: 'images/originals/8.jpg',}
]
};
$( '.photocradle' ).photocradle( params, options );
}); </script>
</div>
i used the method below, and on first page slider, i am getting 2 image overlap, i need 3 small images in 3 page slider with different size
Link is http://theshoaibahmed.com/jquery.photocradle-0.4.2.js
here is the link for what i am trying to achieve and not working
http://www.theshoaibahmed.com/roman/
if you noticed i used
photocradle.$area = $( '' )
.appendTo( $( "#kitchen2") );
what option i can use so if i have to use 3 more image slider with different size, i would be able to use it.

That is because you have 2 different divs with same name class on the same page, and photocradle is confused to which one should he append the code.
Do like this:
<div id="first" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#first' ).photocradle( params, options );
-
<div id="second" class="photocradle" style="Position:absolute; top:58px; left:360px;width:690px;height:420px;float:right;text-align:right;"></div>
-
$( '#second' ).photocradle( params, options );

Here is the link when i tried the technique above
http://www.theshoaibahmed.com/roman/

Related

How to set class only for img element?

I'm using Cycle2 Carousel plugin and this plugin sets a class for my thumbnails it's not okey so far because this plugin set .cycle-pager-active class both image and div that's why I have to set this class for only images.if you check it out my #thumbnail div bottom of the body tag you will see (inspect element) I gotta fix this problem what should I do ?
What I tried ?
I change this line
pagerActiveClass: 'cycle-pager-active',
with this line:
pagerActiveClass: 'img.cycle-pager-active',
but nothing happend
$(document).ready(function(){
$(".mySlideShow").cycle({
pauseOnHover: true,
pagerActiveClass: 'cycle-pager-active',
pager: "#thumbnail",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item"
});
});
.mySlideShow img{
width:700px;
}
#thumbnail img {
margin:10px;
}
.cycle-pager-active{
border:3px solid orange;
}
<div class="mySlideShow">
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_tZuhzJnp6BDndutoN1lV.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-03/otel_armonia-holiday-village-spa_M6XtiCxv8AvkGako7aHr.jpg" alt="">
</div>
<div class="item">
<img src="http://cdn.anitur.com/web/images/h494/2017-07/otel_armonia-holiday-village-spa_EOUfYFhHhV3UoxBxYTAr.jpg" alt="">
</div>
</div>
<div id="thumbnail">
<div class="thumbnail-expand"></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.cycle2/2.1.6/jquery.cycle2.min.js"></script>
Codepen Demo
Even though I think a better approach is to play around with your HTML, and make sure the thumbnails div is only used for images, here is a solution to literally achieve what you asked for :)
Modify the addClass method
(function() {
var originalAddClassMethod = jQuery.fn.addClass;
jQuery.fn.addClass = function() {
// Execute the original method.
var result = originalAddClassMethod.apply(this, arguments);
// trigger a custom event
jQuery(this).trigger("cssClassChanged");
// return the original result
return result;
};
})();
Then listen to cssClassChanged event and remove the active class from non img elements
$(document).ready(function() {
var $slider = $(".mySlideShow").cycle({
pauseOnHover: true,
pager: "#single-pager",
pagerTemplate: "<img src='{{children.0.src}}' width='70' height='70'>",
slides: ".item",
pagerActiveClass: "cycle-pager-active"
});
$("#single-pager > :not(img)").bind("cssClassChanged", function() {
$(this).removeClass("cycle-pager-active");
});
});
DEMO: https://codepen.io/anon/pen/ZJjEGQ
Just create a div that will have the thumbnail divas the child.
<div class="first-div">
<h1> Nice thumbnail! </h1>
<div id="thumbnail"></div>
</div>
Your code will only add the active class to the content inside the #thumbnail

Replace a smaller image with a larger one (after the larger image loads)

I have a few images of superheroes. These are in divs along with much larger images of astronomical objects. These larger images take a while to load. I want the astronomical images to replace the superhero images after they've loaded.
Here's what I have so far: https://jsfiddle.net/vmpfc1/5typ7pnp/1/
HTML:
<body>
<div class="image-wrapper">
<div class="pix"style="background: url('http://baltimorepostexaminer.com/wp-content/uploads/2012/07/spider-man2_pole_4681.jpg'); height:200px;width:200px;">
</div>
<div class="true-image" style="background: url('http://m1.i.pbase.com/o9/27/876727/1/151851961.JlvdQ9xW.GreatCarinaKeyholeandRedHoodNebulae3454x2566pixelsimproved3.jpg')"></div>
</div>
<div class="image-wrapper">
<div class="pix"style="background: url('https://upload.wikimedia.org/wikipedia/en/7/75/Comic_Art_-_Batman_by_Jim_Lee_%282002%29.png'); height:200px;width:200px;">
</div>
<div class="true-image" style="background:url(' https://www.nasa.gov/sites/default/files/706439main_20121113_m6triptych_0.jpg')"></div>
</div>
</body>
js:
setTimeout(function () {
$('.true-image').attr('style').on('load', function () {
$('.pix')({
'background-image': 'url(' + $(this).attr('src') + ')'
});
});
}, 0);
css:
.true-image {
display : none;
}
I am a javascript newbie -- is there a decent way to make the larger space images replace the superhero placeholders?
Is there an easier way to do this in HTML5?
Edited Answer to reflect changes:
<div style="background-image: url('https://i.imgur.com/sOcRl3M.jpg'); height:400px;width:400px" rel="https://i.imgur.com/xr7CRQo.jpg">
</div>
<div style="background-image: url('https://i.imgur.com/1m0NwgN.png'); height:400px;width:400px" rel="https://i.imgur.com/nlFPkc4.jpg">
</div>
Then you can have jQuery to loop through all images which has a rel attribute. 2 or 2,000 images, it does not matter.
$('div[rel]').each(function() {
var rel = $(this).attr('rel');
var self = $(this);
var img = new Image();
$(img).load(rel, '', function() {
self.css('background-image', 'url('+rel+')');
});
});
You can see it working here: https://jsfiddle.net/83zLumuk/4/

Using jQuery to change image source dynamically

I have a page that is a series of N img elements. I need each image to, when clicked, change to the next image in their own series of three. I have listed my html below to explain.
<body>
<div class="images">
<div class="image_group">
<img id="first" src="group1_image1"></img>
<img id="second" src="group1_image2"></img> //this isn't displayed until clicked
<img id="third" src="group1_image3"></img> //when this is displayed, it cycles back to group1image1
</div>
...
<div class="image_group">
<img id="first" src="groupN_image1"></img>
<img id="second" src="groupN_image2"></img>
<img id="third" src="groupN_image3"></img>
</div>
</div>
</body>
Each image_group div displays only one image until clicked, when it displays the second, then the third when clicked, then cycles back to the first when clicked a third time.
My problem is writing a JQuery method that can do this cycling by making "second" images replace "first" images when clicked and so on. The below method rewrites the image source which seems silly but I can't think of a better way to do it. I'm also not sure if the "first" class image will be isolated in the "image_group" div (as it should) or if it will change all images on the page to their "second" class image.
$("#first").attr("src","group1_image2.jpg");
Can anyone think of a way to do this?
I would do something like this
$("image_group img").on("click", function() {
var index = $(this).index();
$(this).attr("src", index === $("img").length - 1 ? $(this).next().src : $("img")[0].src);
});
refine your html:
<body>
<div class="images">
<div class="image_group">
<img id="1,1" data_num="1,1" src="group1_image1"></img>
</div>
...
<div class="image_group">
<img id="n,1" data_num="n,1" src="groupN_image1"></img>
</div>
</div>
</body>
and then you might do something like:
$("image_group img").on("click", function() {
var max = 3;
var indexes = $(this).data('num').split(',');
if ( indexes[1] == max
indexes[1] = 1;
else
indexes[1]++;
$(this).attr("src", "group" + indexes[0] + "_image" + indexes[1]);
$(this).data('num', indexes.join(','))
});

Each not encapsulating blocks

I'm building a site that dynamically positions content in the middle of a group of sections.
Div with image background (Full width image - FWI)
Div with image background (of different height)
My problem is even with the each selector the first div is used to dictate the height to any other divs below it, I'm obviously missing something pretty basic
Jquery
jQuery(window).on("resize", function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
}).resize();
jQuery(".fwi-image img").load(function() {
jQuery('.fwi').each(function() {
jQuery('.image-outer').height(jQuery('.fwi-image').height());
});
});
HTML
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1080" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
my content which is dynamically positioned in the center vertically in my div
</div>
</div>
</div>
<div class="fwi">
<div class="relative">
<div class="fwi-image full-width">
<img width="1920" height="1200" src="">
</div>
<div class="outer image-outer" style="height: 1080px;">
will take height from previous image-outer not its parent - it should be 1200
</div>
</div>
</div>
Place this in you document.
function adjustImageOuterHeight () {
var fwiImage = jQuery(this).parent(".fwi-image");
var imageOuter = fwiImage.next(".image-outer");
imageOuter.height(fwiImage.height());
}
jQuery(document).ready(function () {
jQuery(".fwi-image img")
.load(adjustImageOuterHeight)
.each(function () {
if (this.complete) adjustImageOuterHeight.call(this);
});
});
jQuery(window).resize(function () {
jQuery(".fwi-image img").each(adjustImageOuterHeight);
});
Loose any other jQuery stuff related to .fwi-image. And optionally loose your explicit call to .resize() on the window object.

JS script only applied after window resized

I am using an external library - SwipeJS - for a touch picture slide, and it is only working when I resize my browser window.
I have my images in the Swipe Container like this inside the body:
<div id='mySwipe' style='max-width: 500px; margin: 0 auto' class='swipe'>
<div class='swipe-wrap'>
<div>
<img src="css/images/image4.jpg" width="100%" />
</div>
<div>
<img src="css/images/image2.jpg" width="100%" />
</div>
<div>
<img src="css/images/image3.jpg" width="100%" />
</div>
</div>
</div>
And, I am loading the swipe script right at the end of the body to make sure the document is ready - as the library author suggested. The library is loaded inside the <head> container.
<script>
var elem = document.getElementById('mySwipe');
window.mySwipe = Swipe(elem, {
startSlide : 1,
auto : 3000,
continuous : true
});
</script>
I have tried to check if the document is ready with $(document).ready(function() { } but that solution did not work either.
Have you tried using the widgets default example with just your minor tweaks specifically?
<script>
var slider = Swipe( document.getElementById('mySwipe'), {
startSlide: 1,
auto: 3000,
continuous: true,
disableScroll: false,
stopPropagation: false,
callback: function(index, elem) {},
transitionEnd: function(index, elem) {}
} );
</script>

Categories

Resources