I have successfully installed the Cycle plugin for Jquery and have my banners cycling the way I want them. My question is around building the anchors. I am trying to build something similar to http://www.bazaarvoice.com.
Seems like the anchors are being generated from the javascript but I could be wrong. Here is my html and javascript.
HTML
<div id="slideshow">
<ul class="pager">
<!-- will be populated with thumbs by JS -->
</ul>
<!-- each div is considered as a slide show -->
<div><img src="/images/banner1.png" />You can place text here too !</div>
<div><img src="/images/banner2.png" />and here</div>
<div><img src="/images/banner3.png" />and even here</div>
</div><!-- close #slideshow -->
<div id="tabs"></div>
Javascript
$("#slideshow").cycle({
fx: 'fade', // name of transition effect (or comma separated names, ex: fade,scrollUp,shuffle)
timeout: 5000, // milliseconds between slide transitions (0 to disable auto advance)
speed: 400, // speed of the transition (any valid fx speed value)
pager: "#tabs",// selector for element to use as pager container
pagerClick: null, // callback fn for pager clicks: function(zeroBasedSlideIndex, slideElement)
pagerEvent: 'hover',// name of event which drives the pager navigation
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},
before: function(){ // deselect all slides
$(".thumb").removeClass('selected');
},
after: function(foo, bar, opts){ // select current slide
$("#thumb-"+opts.currSlide).addClass('selected');
},
fit: 1, // force slides to fit container
pause: 1, // true to enable "pause on hover"
pauseOnPagerHover: 1, // stop slideshow when pagers are being hovered
autostop: 0, // true to end slideshow after X transitions (where X == slide count)
autostopCount: 0, // number of transitions (optionally used with autostop to define X)
slideExpr: "div", // all content of div#slider is a slide. but not the pager
fastOnEvent: 100, // force fast transitions when triggered manually (via pager or prev/next); value == time in ms
});
Seems like it would be in the pagerAnchorBuilder but not sure.
looks like you are missing the beginning anchor tag
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></a></li>';
},
right between the <li> and the <img> it should be. seems you have the end tage there already though. the correct way should look something like this:
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
},
if you want to change the link based on the ID of the slide, you may want something like this:
pagerAnchorBuilder: function(i, slide){// callback fn for building anchor links: function(index, DOMelement)
switch(slide.attr("id")){
case "one": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
case "two": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
case "three": return '<li class="thumb" id="thumb-1"><img src="' + slide.src + '" height="30" width="40" /></li>';
}
},
Related
I have been struggling with this for a few days now. I would like to append a div with class id and an image to my container I have been able to render the cards, but upon inspecting the HTML in dev tools I came across this
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</div>
what surprises me is the empty = <= and empty div. These should obviously not be here.
I render the divs like so
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id=card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
Would anyone be able to properly format this ? it has been giving me a headache for the last couple of days.
1.You missed " around id
2.You missed to close <img> tag as well
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"></div>');
});
forget to close img-tag
<div class="hidden-container card-image" id="card-id-1" "="">
<img src="../images/avatar.png" <="" div="">
</img>
</div>
and the marks by id="card-id-'
$.each(cards, function (index, props) {
$("#card-area").append('<div class="hidden-container card-image" id="card-id-' + props.Id + ' "> <img src="' + props.Url + '"</div>');
});
I am currently creating a website that has 60-40 ratio of content. 40% is for the picture per row and 60 for the text per row. I have adjusted a media query to hide pictures completely when in mobile since otherwise they appear in a wrong order because of the page structure. But I want to return the images for mobile and therefore I have created empty div:s where I want to return the image if the window size is smaller. I managed to do that with this code but I struggle removing that new class of images when page is resized back to normal. Instead they stay there along with the original images in 60-40 structure. Can anyone help me? So far I have targeted with jQuery the document, found the class .mobi-img and used the method removeClass() for them but it doesn't seem to work.
// Add images to mobile
var addImages = function () {
if ($(window).width() < 480 ) {
if ($('.mobi-img').length === 0) {
//add first section pictures to mobile
document.getElementById('image1').innerHTML += '<img src="images/final/mobi_img1.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image2').innerHTML += '<img src="images/final/mobi_img2.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image3').innerHTML += '<img src="images/final/mobi_img3.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image4').innerHTML += '<img src="images/final/mobi_img4.png" alt="" class="mobi-img" style="max-width: 200px">';
//add second section pictures to mobile
document.getElementById('image5').innerHTML += '<img src="images/final/mobi_img5.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image6').innerHTML += '<img src="images/final/mobi_img6.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image7').innerHTML += '<img src="images/final/mobi_img7.png" alt="" class="mobi-img" style="max-width: 200px">';
document.getElementById('image8').innerHTML += '<img src="images/final/mobi_img8.png" alt="" class="mobi-img" style="max-width: 200px">';
}
}
}
I tried these codes among many to fix this:
else if ($(window).width() > 480 {
if ($('.mobi-img').length > 0) {
$('mobi-img').removeClass();
// var mobilePictures = document.querySelectorAll('mobi-img');
// $('.mobi-img').remove(mobilePictures);
}
}
Firstly selector $('mobi-img') is wrong, it should be $('.mobi-img').
Then you are calling removeClass without passing any class as argument so that call will be useless whatever the selector. If you want just to remove those images, the code you are looking for is:
$('.mobi-img').remove();
I'm making a slideshow using JQuery Cycle with arrows (done), caption (done), but I can't make the counter. I'm basing my slideshow on this example:
http://www.morganstudio.co.uk/ (in this one the counter works but there is no slideshow, which I have)
HTML:
<div id=“slideshow”>
<img class="slide" src="images/one.jpg" alt=“one” name="http://pageone.com"/>
<img class="slide" src="images/two.jpg" alt=“two” name="http://pagetwo.com"/>
<img class="slide" src="images/three.jpg" alt=“three” name="http://pagethree.com"/>
</div>
<div id=“navigator”>
<a id="prev" href=""><div id="navPhotos"></div></a>
<a id="next" href=""><div id="navPhotos2"></div></a>
</div>
<div id="description"></div>
<div id=“counter”></div>
JAVASCRIPT:
$(document).ready(function() {
$(‘#slideshow’).cycle({
fx:'fade',
speed: 300,
timeout:4000,
next: '#next',
prev: '#prev',
before: onBefore,
});
function onBefore() {
$('#description p').fadeIn('1000');
$('#description').html('<p>' + '' + this.alt + '' + '</p>');
}
});
Try to change your JavaScript to the following, where i added another callback.
(disclaimer, not tested).
$(document).ready(function() {
$(‘#slideshow’).cycle({
fx:'fade',
speed: 300,
timeout:4000,
next: '#next',
prev: '#prev',
before: onBefore,
after: onAfter
});
function onBefore() {
$('#description p').fadeIn('1000');
$('#description').html('<p>' + '' + this.alt + '' + '</p>');
}
};
function onAfter(curr,next,opts) {
var caption = 'Image ' + (opts.currSlide + 1) + ' of ' + opts.slideCount;
$('#caption').html(caption);
}
I have a JSON file with the structure below, which I want to display the make, model, name and price, under each image, but I obviously want the different values.
[
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":" Bb Clarinet", "price":"£400","quantityAvailable":"10", "description":"ABS resin Buffet B12 student clarinet, clear sound.", "rating":"4", "make":"Buffet", "model":"B12"},
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bb Clarinet", "price":"£1700","quantityAvailable":"10", "description":" CX with full round sound and clear tone.", "rating":"5", "make":"Yamaha", "model":"YCL-CX"},
{"instrumentGroup":"Woodwind", "category1":"Instrument", "name":"Bass Clarinet", "price":"£3500","quantityAvailable":"5", "description":"Student Grenadilla wood bass clarinet with silver plated keywork. Range down to Eb.", "rating":"4", "make":"Buffet", "model":"BC1180"}
]
The file is much larger than this but just working with a little for now.
In my html, I have multiple containers as there's more on the page than just this but the structure of the product information is below.
<article id="prodList">
<article id="products">
<section id="row">
<figure class="prodInfo">
<!--this makes the whole product area clickable!--><a href="#link">
<span class="link"></span>
</a>
<img src="Images/saxophone.png" alt="instrument" width="100" height="100">
<figcaption>
</figcaption>
</figure>
<figure class="prodInfo">
<!--this makes the whole product area clickable!--><a href="#link">
<span class="link"></span>
</a>
<img src="Images/saxophone.png" alt="instrument" width="100" height="100">
<figcaption>
</figcaption>
</figure>
</section>
</article>
</article>
I want to display the information within the figcaption, with make/model on one line, name on the next then price on the next. My .js file below is printing out the last value in the JSON file under every image, but I can't work out how to print each value as it is going through and then stop when it reaches the 18th value.
$.getJSON("products.json", function(result){
$.each(result, function(key, val){
$('figcaption').html(val.make + " " + val.model + "<br/>" + val.name + "<br/>" + val.price);
});
});
Any help would be appreciated. Eventually I will use a paginator to display the next 18 values on the next page, but once the first is working I believe this should be easier.
The main issue is how to separate them so it prints one in each div.
Thanks.
Try
$.getJSON("products.json", function(result) {
$.each(result, function(key, val){
if (key < 18) {
$("figcaption").eq(key).html(val.make + " "
+ val.model + "<br/>" + val.name + "<br/>" + val.price);
}
});
});
jsfiddle http://jsfiddle.net/guest271314/6ftjLLjv/
I have the following gallery set up in jQuery: -
<script type="text/javascript">
$(function () {
$(".image").click(function () {
var image = $(this).attr("rel");
$('#galleryImage').hide();
$('#galleryImage').fadeIn('slow');
$('#galleryImage').html('<img src="' + image + '"/>');
return false;
});
$("#galleryImage").click(function () {
var imageLarge = $(this).attr("rel");
$('#galleryImage').html('<a href="' + imageLarge + '"/>');
$('#galleryImage a').lightBox();
});
});
<div id="galleryImage">
<img src="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" width="337" height="223" alt="forbury court" />
</div>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small1.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb1.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small2.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb2.jpg" class="thumb" border="0" /></a>
<a href="#" rel="../../Images/Design/Gallery/HavellHouse/havellhouse-small3.jpg" class="image">
<img src="../../Images/Design/Gallery/HavellHouse/Thumbs/havellhouse-thumb3.jpg" class="thumb" border="0" /></a>
That takes the rel attribute value when a thumbnail is clicked and inserts it into the galleryImage div allowing the user to select different images via the thumbnails that all display in one place.
Now, what I want to do is apply lightbox to the current image in the #galleryImage div, so that if a user clicks it, an even larger version comes up via the lightbox plugin, but I can't quite get my head around how to do it, this is what I have so far, am I heading in the right direction?
Fixed it, used:
$(".image").click(function() {
var image = $(this).attr("rel");
var imageLarge = $(this).attr("title");
$("#galleryImage img").attr("src",image);
$("#galleryImage a").attr("href", imageLarge);
return false;
}
Using the title value which stores a url to the large image, taken from the currently selected thumbnail and just setting the attribute value in jQuery rather than inserting a bunch of HTML right into the div