prettyPhoto multiple galleries on one page - javascript

I am building a worpdress site and have multiple galleries on a page built using the shortcode. At the moment all the image are given the rel attribute 'prettyPhoto[1]' but I need each gallery to be separate.
I have 56 images in total on the page, so when the first image of gallery 1 opens in lightbox it says 1/56 and I can click through all 56 images, what I want is for gallery one to say 1/16
then gallery 1/16 etc.
I was told to edit this line of script in my raw.js file:
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
but nor sure what to do it with it? Any help would be greatly appreciated.
Here is a link to the page in question:
http://www.tetra-shed.co.uk/news/

prettyPhoto groups galleries together based on the contents of the square brackets. So you are getting all 56 images in the same gallery because they have all been assigned to gallery 1.
What you really want is the first sixteen in gallery 1;
$(".gallery-icon a").attr('rel', 'prettyPhoto[1]');
And the next 16 in gallery 2;
$(".gallery-icon a").attr('rel', 'prettyPhoto[2]');
The question is- how to do that given that the rel attribute is being assigned via JS? Well I would look at doing it based on the parent parent div id. Each gallery-icon element has a gallery-item parent. Each of those is part of a gallery class which has a specific ID. For example
<div id='gallery-3' class='gallery galleryid-555 gallery-columns-4 gallery-size-thumbnail'>
<dl class='gallery-item'>
<dt class='gallery-icon'>
So you would want to assign that unique gallery id as the pretty photo rel value. ie;
$(".gallery-icon a").attr('rel', 'prettyPhoto[gallery-3]');
I would do it by finding all gallery-icons and using closest() to find the parent gallery id, like this;
Finding the id of a parent div using Jquery
I've not tested it or anything but something like this should get you going in the right direction;
$('#content').find('.gallery-icon a').each(function() {
var gallid = $(this).closest("div").attr("id");
$(this).attr('rel', 'prettyPhoto['+ gallid +']');
});

I maybe came with easier solution, I am just going through all my gallery div in each function and then initializing the prettyPhoto in images inside them.
$(document).ready(function(){
$.each($(".gallery"), function(i, val) {
var queryString = ".gallery:nth(" + i + ") a[rel^='prettyPhoto']";
$(queryString).prettyPhoto({animation_speed:'normal',theme:'light_square', social_tools: false});
});
});

All that needs to be done is to change the rel in the html where you add your gallery that looks something like this rel="prettyPhoto[pp_gal]"
in your first gallery you create inside your div change the rel="prettyPhoto[pp_gal]" to "prettyPhoto[gallery1]" (for example)
and the next to "prettyPhoto[gallery2]" and so on.

Related

How would I make a self-linking <div>?

After much Googling, I resort to the chance at ridicule and moderation on Stack Exchange.
What I am trying to do sounds simple enough. I want to make a <div> id/class that will link automatically create a link to itself via some kind of scripting.
Let me put down some pseudocode, before I make it sound more complicated than it is:
#Let div.link = xxx.html
#Let div.pic = xxx.png/jpg
for div in HTMLdocument:
if div.class == "autolink":
div = "<img src=\"mysite/" + div.pic + ">"
Now, obviously that's Python pseudocode, but I am familiar(ish) with PHP and Javascript. Basically, I want to make the div generate an HTML link without having to actually type out the tags and links for every given div on a web page. I want to be able to type, in my index.html:
<html>
<head></head>
<body>
<div class = "1"></div>
<div class = "2"></div>
</body>
</html>
and then to be presented with a page that has the two divs linked, imaged, and, preferably, formatted.
Like I said, the problem seems simple, but I can't seem to get it to work right, in any language. This seems like a thing that would be very useful for begiiner web designers.
PERSONAL NOTE:
I would preferably like to see a solution in PHP or Javascript, but if you are good with Django and want to show me how to get it done in that, I would be just as grateful!
=========================================
EXAMPLE:
Let's say you have a browser based RPG, and you want to show your player's inventory. The Inventory page would display the items in a players inventory, complete with a link and image, based on whatever was in that user's inventory page. It would look like this (this is VERY rough output, Statements tagged in #these# are not code, and should be interpereted as what they describe):
<h1>User's Inventory:</h1>
<p><div class = "item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "item_2">#Link to page of 'item_2', image of 'item_2'#</div></p>
The above would display, roughly, a header that said "User's Inventory", and then display a linked image of item_1, followed by a newline and then a linked image of item_2, where said items would be in a separate file OR a list that lists all the items and their respective links and images.
You can use jquery, and when page dom is loaded, you cycle through each div that has the class autolink and do your manipulations (add your desired html into each div). You can use the id of each div to place data inside. You can use a prefix to that id values for different types of data. For example, im using "inventory_" as a prefix.
<h1>User's Inventory:</h1>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_1', image of 'item_1'#</div></p>
<p><div class = "autolink" id="inventory_item_1">#Link to page of 'item_2', image of 'item_2'#</div></p>
then jquery on document ready:
<script type="text/javascript">
$(document).ready(function ()
{
// define your website here
var mysite = "http://www.example.com/";
// this will cycle through each div with class autolink. using `this` to reffer to each.
$(".autolink").each(function () {
// we get for div with id="inventory_item_1" ...
var mylink = $(this).attr('id').replace("inventory_",""); // ... a value item_1
var myimagesrc = $(this).attr('id').replace("inventory_","image_"); // ... image_item_1
$(this).html('<img src="'+mysite+'images/'+myimagesrc+'.jpg">');
// the above will add html code of this format:
// <img src="http://www.example.com/images/image_item_1.jpg">
});
});
</script>
try it here:
http://jsfiddle.net/5APhT/2/
I'll give a sample in php. Here is an example if you already have a set of links to use
<?php
//Create a multidimensional array to store all you need to create links
$links['1'][]="http://www.yahoo.com";
$links['1'][]="yahoo.com";
$links['2'][]="http://www.facebook.com";
$links['2'][]="yahoo.com";
$links['3'][]="http://www.google.com";
$links['3'][]="yahoo.com";
foreach($links as $class => $innerArray){
$link=innerArray[0];
$linktext=innerArray[1];
echo "<div class='$class'><a href='$link'>$linktext</a></div>";
}
?>
This creates the divs for you so you don't have to add them in advance.
You can add images in the same manner

Gallery images to be displayed based on a criteria

I have a set of images with names like NH-1,NH-2,NH-3,... and another set NS-1,NS-2,NS-3,.... displayed as gallery images with three images in a row. Now, I will create a div at the left hand side that displays the links to categories. Say this div has categories NH and NS . Suppose when I click on NH, the images in the gallery should get filtered and only images with prefix NH should be displayed and when I click on NS all images with NS as prefix should be displayed.By default if nothing is clicked, then all images should be displayed. How can I do this.
You have got your data structured only, just need to consider the approach
first of you need to catch the click function on the categories
$("category selector").click(function(){
//logic here to call a function to show images and pass prefix
showImageWithPrefix(get NH or NS,send image count accordingly);
});
function showImageWithPrefix(prefix,Count)
{
//now you can show the images using a for loop just by appending `'-`' and
`image extension` to the `image name prefix`
}
You can implement a javascript
function showImages(var type) {
// Based on the type of image, you can display the images as gallery
// For each image element you want to add you can use the following code. Define a CSS class called as .thumbnail to show the image gallery in thumbnail size.
$('#content').prepend('<img id="imgid" src="imgfile.jpg" class="thumbnail"/>')
}
Call the showImages('') method in the onlcick event of the link.

Change Dynamic Link Text In Javascript

I currently have a slideshow run with HTMl CSS and JS at the moment for the navigation buttons below the slideshow it is just placing numbers instead of text. Is there a way to grab the images title and use it or custom text for each slide link. Below i included the Javascript that makes the navigation buttons and adds the text. If you need anything else just let me know.
If i can just specify text in this JS file that would work too.
Also if it may help im using Kickstart HTML Template.
Link to view it http://bliskdesigns.com/clients/timbr/
var items = $(this).find('li');
wrap.append('<ul class="slideshow-buttons"></ul>');
items.each(function(index){
wrap.find('.slideshow-buttons')
.append('<li>'+(index+2)+'</li>');
});
It's difficult to give you a concise answer with what you've provided, however:
Assuming that in the code you've provided:
items is an array containing each slide in your slideshow;
That each element in items contains an img;
That the text that you want to appear in the slideshow nav is the title attribute of each img;
That the unordered list being built by wrap is the navigation;
That the text you want to change is the numeral within the anchor of each item injected into wrap.
Here's a potential answer:
// put all slides into 'items'
var items = $(this).find('li');
// append the wrap element with an unordered list
wrap.append('<ul class="slideshow-buttons"></ul>');
// loop over each item
items.each(function(index){
// grab the title attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('title');
// push a new <li> into 'wrap'
wrap.find('.slideshow-buttons').append('<li>'+titleText+'</li>');
});
This should just be a direct replacement for wherever in your project the code you've included above came from.
As I say: I can't promise that this will work without a lot more information, but in theory it will. Make sure that each of your images has a title:
<img src="/link/to/image.kpg" alt="alternative text" title="text you want to appear in the slider navigation" >
Alternatively, you can use the text in the image's alt tag instead by changing this line from above:
// grab the alt attribute of the img child of this instance of items
var titleText = $(this).find('img').attr('alt');
In the list items you can add the text that you want to display instead of numbers, as shown below.
<li data-displayText="Timber Mart"> <img src="http://i.imgur.com/4XKIENA.png" width="920" /> </li>
Then in above code you can use the text instead of index, as shown below.
wrap.find('.slideshow-buttons')
.append('<li>'+$(items[index]).attr("data-displayText")+'</li>');

How to add jquery events to added classes?

I am trying to create an image gallery, I am using numbers instead of left/right arrows. At the moment, I am trying to get it working with only 2 image (i.g 2 numbers)
this is the html . the id page, is the highlighted number
<div class="grid_1 pagelink" id="page"><p>1</p></div>
<div class="grid_1 pagelink"><p>2</p></div>
the first time the page loads, the code below works. so when I click on link 2 the the code bellow runs fine. But then I want the same code to be triggered when I click back on the first link; but when I do that, the page refreshes by ignoring the code bellow:
$('.pagelink').live('click', function(e){
e.preventDefault();
var frame = $(this).text() - 1;
var frames = 240 * frame;
// $('#gal').animate({marginLeft:'500px'},'slow');
$('#gal').animate({marginLeft: "+="+frames+'px'},'slow');
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
// $('#book').animate({ left: '50' });
})
I thought that the .live() would do that for me but it is not working.
I hope you could help
thank you
Previous, this is because you are removing the class of link "pagelink" which were used to map the clicked event.
Also, use another class instead of id(#page) to identify the #page link, id might be problem if its already assign to other link. like
$(this).removeClass('pagelink').addClass('page');
$('.page').addClass('pagelink').removeClass('page');
live should work fine. i think you have a bug in your code, and its probably here:
$(this).attr('id', 'page').removeClass('pagelink');
$('#page').addClass('pagelink').removeAttr('id','page');
what exactly are you trying to accomplish with this code?
when you click on page2, the you set the div's id to be page, but now you have 2 elements with an id of page, and when you select that id, you get the first one (ie page1), but you still remove the class pagelink from page2
in other words, the bug is that at some point you will have 2 elements with the same id (and ids must be unique btw) so when you select that id with $('#page') you always get the first one

How do you switch off the Image Count in NyroModal (lightbox) when displaying images

When using NyroModal to display images it automatically shows the image count of how many are in the collection in the H1 tag when the popup occurs i.e. "1/3", "2/3", "3/3"
Does anyone know how to siwtch this off or manipulate the h1 tag?
I'm also interested in NyroModal automatically positioning the h1 tag at the bottom of the image instead of the default (top).
Plugin is located here: http://nyromodal.nyrodev.com/
You should be able to remove the h1 with CSS
h1#nyroModalTitle{display:none}
Looks like there's also a parameter you can pass through: title: null
Alternatively, you should be able to position the h1 tag at teh bottom, but it might involve editing the source javascript.
To remove the 'Page 1 of ...' in NyroModal, use this javascript:
$.nyroModalSettings({ galleryCounts: '' });
To place the nyroModal title/heading below the image then go into the nyromodal javascript code (unpacked) and search for the code below and replace 'modal.contentWrapper.prepend' with 'modal.contentWrapper.append'.
function setTitle() {
var title = $('h1#nyroModalTitle', modal.contentWrapper);
if (title.length)
title.text(currentSettings.title);
else
//modal.contentWrapper.prepend('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
modal.contentWrapper.append('<h1 id="nyroModalTitle">'+currentSettings.title+'</h1>');
}

Categories